인터넷 익스플로러(IE) 에서 이미지를 둘러싼 태그의 여백에 영향을 주는 요소

Local Oriented/HTML CSS JS

래빗 크리스 2013. 5. 21. 18:30

예를들어 아래와 같은 HTML 코드가 있다고 할 때, DOCTYPE 이 세팅된 경우라면 생각하는 대로 표시되는데 DOCTYPE 이 없다면..?

Box 모델을 생각해 볼때, padding 과 margin 을 고려해 볼 수 있는데..

padding 은 IE 와 Chrome 등에서 유효하지만, margin 의 경우 상하는 값을 주어도 적용이 되지 않고 좌우만 수치 조정이 가능.

다음으로 생각해 볼 것은 line-height.. 그런데도 이미지 상하에 여백이 발생한다면 font-size 를 조정해 보세요.

물론, 이미지에는 적용할 필요 없고, 이미지를 감싸는 태그에 적용하면 됩니다.

<html>

...

<style>

...

div.ln1 {width:428px; height:10px; padding:0;margin:0; line-height:0; font-size:0}

div.ln1 img {width:428px; height:10px; padding:0;margin:0; line-height:0;}

...

</style>

...

...

</html>