이것 좀 설명해 주실분..
설화
안녕하세요
왼쪽이 ie6,7 이고 오른쪽이 표준브라우져 입니다
div style=background:#000; height:300px;
div style=position:absolute; left:0; top:0; width:0; height:0;/div
div style=height:150px; width:100px; background:yellow;
div style=width:10px; height:10px; margin:50px 0 0 20px; background:#000;
/div
/div
div style=width:300px; height:20px; background:red; margin-top:80px;/div
/div
소스는 이렇고요.
두번째 div안에 있는 div에 마진탑을 주었을 때 왜 표준브라우저에서는
최상위 div에 마진탑을 준것처럼 보이는지 잘 이해가 되질 않습니다
이런 현상은 2번째 div에 border값을 주거나 overflow:hidden을 주었을 때
왼쪽과 동일 하게 보이게 됩니다. 설명 좀 해주세요 ㅠㅠㅠㅠ
-
핑크펄
그건 1번과 같은 경우네요 ㅎㅎ
-
베레기
div style=\position:relective; background:#000; height:300px;\
\tdiv style=\position:absolute; left:0; top:0; width:0; height:0; border:1px solid black;\/div
\tdiv style=\height:150px; width:100px; background:yellow;\
\t\tdiv style=\position:absolute; wid -
곰돌츼
div/div
div/div
형제간
divdiv/div/div
부모자식간 이라 생각하시면 되요
마진병합이라고 흔히 알려져 있는건 위에 형제간에는 큰값을 음수가 섞여있을때는 합해지고...
부모자식간은 조금 틀린데 위에서 말씀하셨듯이 보더나 패딩이 없거나 자식상위에 컨텐츠가 없을때 통합된니다 좋은 코드가 아니기 때문에 사용은 안하시는게 좋을거 같습니다. -
Glisten
통합하고 병합.. 같은 말 이겠죠? ^^;;
마진통합현상은 이런 경우에 일어납니다.
1. 인접한 엘리먼트의 margin-top값과 margin-bottom이 겹쳐지는 현상
2. 블록엘리먼트에 포함된 블록엘리먼트의 통합현상 (위에서 말씀드린 경우)
3. 블록엘리먼트에 포함된 인라인 엘리먼트의 좌우마진에 더블마진이 일어나지 않는경우? -
채꽃
원본 올렸어요 ㄷㄷ
-
연자두
저런 경우가 많이 발생하는데요.. 저는 저런경우 margin-top:50; 대신에 상위 div에 padding-top:50을 준답니다. 젤먼저 마진을 띄우는 애는 전체에 영향을 주더라구요~
-
갅지돋는슬아
표준브라우저에선,
해당 엘리먼트의 부모에 들어가있는 요소가 자식요소 하나밖에 없을때
일어나는 마진 통합현상이 일어납니다!
div class=\a\div class=\b컨텐츠/div/div
이렇게 된 마크업에 .b {margin-top:50px;}을 줘버리면
부모 엘리먼트인 .a에 margin-top을 준것 같은 효과가 생기지만,
div class=\a\div class=\b컨텐츠/div또다른컨텐츠2/div
이렇게 된 마크업에서는 .b{margin- -
튼동
div style=\background:#000; height:300px; overflow:hidden;\
\tdiv style=\position:absolute; left:0; top:0; width:0; height:0; border:1px solid black; overflow:hidden;\/div
\tdiv style=\height:150px; width:100px; background:yellow; overflow:hidden;\
\t\tdi