Floating Block Margin Calculation Error in IE
IE에서 플로스(float) 된 블록을 다룰 때 문제가 있습니다.
<div style="float: left; margin-left: 10px">Float Block</div>
위와 같이 사용할 경우 좌측 공백(margin-left)이 10픽셀이 아니라 20픽셀이 됩니다. 이 현상은 IE6 에서도 여전히 발견되는 현상입니다. 왜 여백이 두배의 값을 갖는지는 알 수 없지만. 위와 같은 형태로 사용을 하게 되면 IE에서는 원하는 결과를 얻을 수 없습니다.
여백을 주기 위해서는 상위 블록에서 여백을 결정하고 플로트 블록은 단지 상위 블록의 경계에 플로트하는 방법을 써야 합니다.
<div style="margin-left: 10px"> <div style="float: left;"> FloatBlock </div> </div>
이렇게 써야 하지요.
팁이라기 보다는 error report 같군요...^^
display: inline; 을 이용하면 IE에서도 정상적인 여백을 지정할 수 있습니다.
February 20, 2004 04:42 PM
![[Valid RSS]](/home/images/badge-valid-rss.png "Validate my RSS feed"){kind=icon}
