float:left; margin-bottom

[송효진]

http://www.positioniseverything.net/explorer.html
여기에 없어서 해결을 못하고 있습니다.

아래와 같을 때 IE 에서 margin-bottom 이 없어집니다.
크기, 위치 잡을 때 padding 처리만으로는 너무 힘듭니다.
IE 만 padding-bottom ++ 하려 하니,
객체마다 일일히 해 줘야 해서 불편합니다.
expression 으로 하려 해도 태그명에 지정한 스타일보다 클래스에 지정한 스타일이 우선시 되기 때문에 소용이 없습니다.
margin-bottom 을 살릴 방법이 있나요?

<style>
div {
float:left;
border-style:solid;
border-width:1px;
margin:4px;
padding:5px;
}
</style>

<div>
<div>
<div>
<div></div>
</div>
</div>
</div>

[dpinjs]

효진님 안녕하세요. 여기서 뵙게 되니 반갑네요
일단 ie6에서 margin-bottom 이 제대로 안잡히는 문제의 원인은 저도
뭔지 잘 모르겠습니다만 피해갈 수 있는 방법은 알고 있어요.
스타일에서 width 속성을 주시면 될거에요.
일단 ie6에서는 width가 min-width처럼 작동을 하기 때문에
min-width값을 주시면 해결될 것입니다.

그런데 문제는
ie7과 ff는 다르게 랜더링을 하죠
그래서 ie6핵을 사용하셔서
div {
float:left;
border-style:solid;
border-width:1px;
margin:10px;
padding:5px;
#width:0px;
}

하시면 margin-bottom이 제대로 영역을 잡고 나올거에요.
나중에 시간남녀 원인을 찾아볼게요. 지금은 토요일이라서
만화책을 보러 고고씽~!!

[송종식(쏭군)]

질문과 직접적인 답은 아니구요.
관련있는 문제를 하나 말씀드리겠습니당

박스 모델을 만들때...

□
■
□

이렇게 세로로 나열된 3개의 박스를 만들고

박스간의 간격을 정하실때는,
위의 박스에서 아래의 박스로 margin 값을 주어 작업을 하시는 것이 좋습니다.

세로 마진의 특성은

예를 들면

□
□

위의 박스에서 margin-bottom 이 20px
아래의 박스에서 margin-top 이 10px 이면...

위 아래 박스 간격이 30px 이 아닌.. 20px 로 나옵니다.
큰 마진이 작은 마진을 먹어버리는게 정상입니다

만약 마진 bottom이 꿈쩍도하지 않으시면
clear: both 나.. font-size: 0 같은 꽁수도 동원해보시길 바랍니다...

ㅠ_ㅠ)/

더욱더 고수님께서 답변을