[HTML, CSS] html 작업 시 이미지 파일 공백 제거 방법

 

 

HTML로 레이아웃 설정을 하다보면,
DIV태그 안이나 P태그 안에 이미지가 있는 경우,
<img> 태그에 margin: 0; padding: 0; 을 설정했음에도
1 ~ 5px 의 공백이 생긴다.

 

발생 이유

 

HTML 태그는 크게 블록 요소(Block element)와 인라인 요소(Inline element)로 나누어진다.

그 중 <img> 태그는 인라인 요소이다.

인라인 요소를 사용하면 보이지 않는 라인 박스가 생성된다.

이 박스 안의 내용을 수직 정렬할 때는 두 가지 방식이 존재한다.

 

 

※ 인라인 요소의 수직 정렬

 

 

- 비표준 모드(IE7이하, doctype 선언 X): 박스의 border bottom에 맞춰 정렬

- 표준 모드(doctype 선언 O): baseline에 맞춰 정렬

 

 

비표준 모드(doctype 선언 X)

표준 모드(doctype 선언 O)

 

표준 모드에서는 아래에 살짝 공백이 생기는 것을 확인할 수 있다.

표준 모드에서는 baseline에 맞춰 정렬한다고 했는데, 그렇다면 baseline(기준선)이란 무엇일까?

 

 

 

※ baseline(기준선)이란?

 

 

 

글꼴은 baseline, ascender, descender 3가지로 나눌 수 있다.

 

1. baseline: p, q, j, y 등에서 아래 삐침을 뺀 밑 선
2. ascender: b, d, f, h 등과 같이 일반 소문자(a, c, e 등)보다 위로 나온 부분
3. descender: p, q, j, y 등에서 baseline 밑으로 나온 부분

라인 박스 안에 글자가 없고 이미지만 있어도,

보이지 않는 글자의 descender를 고려하여 baseline에 맞추다 보니

하단에 공백이 생기게 되는 것이다.

 

해결 방안

첫번째,

이미지의 vertical-align을 bottom으로 바꾸기.

vertical-align : bottom은 아래 삐침이 있는 글자까지 고려해 하단으로 정렬하라는 뜻.

그렇게 되면 공백이 없어지게 된다. 가장 추천하는 방법이다.

 

<style>
 div{
	background:blue;
 }
 img{
	vertical-align:bottom;
 }
</style>

두번째,
이미지를 인라인 요소에서 블록 요소로 속성을 변경시키기.

인라인 요소 때문에 생성된 박스의 수직 정렬이 문제이기 때문에, 인라인 요소를 블록 요소로 변환한다.

블록 요소는 가상의 기준선이 없기 때문에 하단의 공백을 무시한다.

display : block로 변경을 하면 된다.

하지만 한 줄을 다 차지하게 된다는 단점이 있다.

 

<style>
 div{
	background:blue;
 }
 img{
	display: block;
 }
</style>

 

세번째,
이미지의 margin-bottom의 값을 음수로 지정한다.

<style>
 div{
	background:blue;
 }
 img{
	margin-bottom: -3px;
 }
</style>

 

출처 및 참조

 

GitHub - baeharam/Must-Know-About-Frontend: 취준생이라면 알면 좋을 프론트엔드 관련 지식들

이미지 하단에 생기는 이상한 공백 없애기

img 태그 공백 없애기

html 작업시 이미지파일(img) 공백 제거, 없애기 방법 (인라인요소, 블럭요소의 정의)

[html/css] div 이미지 공백 없애기