img 요소의 여백

작성자 : 유낙동 (다음서비스 웹표준개발2팀)

테스트 브라우저 버전정보

• - IE6, IE7, IE8, IE9, IE10, 크롬(27.0), 사파리(5.1.7), 오페라(12.15), 파폭(21.0)

INTRO

• - DTD 나 브라우저, 부모 엘리먼트의 영향을 받아 img요소의 여백 유무가 결정
• - 각 케이스별 결과를 분석해보고 이에 대한 원인과 결론을 도출

결론

• - 경우의 수는 크게 2가지, 소스내 공백이 있을 경우와 없을 경우로 나뉘어 짐
  • - 소스내 공백이 없을 경우 (DTD, 브라우저, 부모 엘리먼트)별 로 상이한 결과를 나타냄
  • - 소스내 공백이 있을 경우에는 무엇에 관계없이 하단 여백 생김 (오페라 제외)

소스내 공백이 없을 경우

부모가 block 요소일 때

• - 모든 브라우저 (IE6 제외)

  xthml	html5

• - IE6

  xthml	html5

  <style>
  .wrap {background:red;}
  </style>
  <div class="wrap"><img src="test.jpg" /><img src="test.jpg" /></div>
  

---

부모가 inline 요소일 때

• - IE7 이상, 오페라

  xthml	html5

• - 크롬, 사파리, 파폭

  xthml	html5

• - IE6

  xthml	html5

  <style>
  .wrap {background:red;}
  </style>
  <span class="wrap"><img src="test.jpg" /><img src="test.jpg" /></span>
  

소스내 공백이 있을 경우

부모가 block 요소일 때

• - 모든 브라우저 (오페라 제외)

  xthml	html5

• - 오페라

  xthml	html5

  <style>
  .wrap {background:red;}
  </style>
  <div class="wrap">
      <img src="test.jpg" />
      <img src="test.jpg" />
  </div>
  

---

부모가 inline 요소일 때

• - 모든 브라우저

  xthml	html5

  <style>
  .wrap {background:red;}
  </style>
  <span class="wrap">
      <img src="test.jpg" />
      <img src="test.jpg" />
  </span>
  

원인

• - 소스내 공백이 있을 경우,
  공백을 하나의 텍스트 노드로 인식하여,
  기본 행간이 적용되면서 여백 생김
• - 소스의 공백이 없는 경우에도,
  html5 DTD 이거나 부모의 요소가 inline인 경우,
  img 요소에 기본 행간이 적용되어 여백 생김

해결방법

• - img 요소에 display:block; 사용으로 행간의 영향에서 벗어나 여백을 방지.
• - img 요소에 vertical-align:top; 사용으로, 기본 행간 기준을 상단으로 하여 여백을 방지.
• - 부모 요소에서 line-height:0; 사용으로 기본 행간을 초기화하여 여백을 방지. (이는 부모가 블록요소일 경우에만 사용 가능하고, IE6에서는 블록요소에서도 적용 안됨)