Blog 본문

지식공유/이슈&버그


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


테스트 브라우저 버전정보
  • - IE6, IE7, IE8, IE9, IE10, 크롬(27.0), 사파리(5.1.7), 오페라(12.15), 파폭(21.0)
INTRO
  • - DTD 나 브라우저, 부모 엘리먼트의 영향을 받아 img요소의 여백 유무가 결정
  • - 각 케이스별 결과를 분석해보고 이에 대한 원인과 결론을 도출

결론

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

소스내 공백이 없을 경우

부모가 block 요소일 때

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



  • - IE6
    xthmlhtml5


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

부모가 inline 요소일 때

  • - IE7 이상, 오페라
    xthmlhtml5



  • - 크롬, 사파리, 파폭
    xthmlhtml5



  • - IE6
    xthmlhtml5

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

소스내 공백이 있을 경우

부모가 block 요소일 때

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

  • - 오페라
    xthmlhtml5

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

부모가 inline 요소일 때

  • - 모든 브라우저
    xthmlhtml5

    <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에서는 블록요소에서도 적용 안됨)


'지식공유 > 이슈&버그' 카테고리의 다른 글

img 요소의 여백  (2) 2013.07.09
Font 축약형 분석  (0) 2013.07.09
Posted by darum

트랙백 0개, 댓글 2개가 달렸습니다.

전체 댓글
Ahryne Sinner | (2013.09.09 00:47)

좋은 글 잘 보고 갑니다. 도움이 됐어요.

고맙습니다 | (2016.10.21 11:10)

됐어요!! ㅠㅠ

댓글 작성