img 태그 공백 없애기

HTML

HTML 작업을 하다보면 <img> 태그에 margin: 0; padding: 0; 을 설정했음에도 불구하고 1 ~ 5px 의 공백이 생기는 것을 볼 수 있습니다. 우선 해결방법을 먼저 소개하고 왜 이러한 공백이 생기는지 이야기해보려 합니다.

해결방법

두 가지 해결방법이 있습니다. 저는 주로 블록 요소로 속성을 변경시키는 방법을 사용합니다.

블록 요소로 속성을 변경

간단하게 <img> 태그에 css 속성으로 display: block; 을 추가하여 해결합니다.

img {
    display: block;
}

혹은 <img> 태그에 style 속성을 사용하여 해결할 수도 있습니다.

<img src="./html.png" alt="HTML image" style="display: block;">

vertical-align

vertical-align 의 기본 값은 baseline 인데 이 값을 top 혹은 bottom 으로 변경해줍니다.

<img src="./html.jpeg" alt="HTML image" style="vertical-align: top;">
**<img src="./html.jpeg" alt="HTML image" style="vertical-align: bottom;">**

발생 원인

HTML의 태그는 크게 블록 요소(Block element)와 인라인 요소(Inline element)로 나누어집니다. 그 중 <img> 태그는 인라인 요소입니다. 따라서 블록 요소와 달리 보이지 않은 가상의 기준선을 가지고 있습니다. 이를 결정하는 속성이 위에서 이야기한 vertical-align: baseline; 입니다.

따라서 해결책으로 <img> 태그를 블록 요소로 변경하거나 vertical-align 의 값을 바꾸는 것을 제시했던 것입니다.

마무리

이 글을 통해 HTML의 태그가 크게 블록 요소와 인라인 요소로 나누어진다는 사실을 알고 인라인 요소의 특징을 알게되었다면 <input> , <textarea> 등 다른 인라인 요소에서 같은 문제를 발견한다면 해결해낼 수 있을 겁니다. 본인의 생각과 다르게 레이아웃이 될 경우 HTML의 기본을 생각해본다면 CSS를 사용하는데 도움이 될 것이라고 믿어의심치 않습니다.

참고링크

• https://uxgjs.tistory.com/45
• https://dosiunni.tistory.com/5