외곽 div에 margin값이 먹히는 이유..
연블랙
.junsi{background:url(../sub2/images/sub0_bg.jpg) no-repeat; width:537px; height:777px;}
.junsi .exp{color:#fff; margin:240px 0 0 220px; width:280px;}
div class=junsi
p class=exp내용/p
/div
외곽 div에 백그라운드 이미지를 넣고 그 안에 내용을 넣었습니다. 근데 그 내용 나오는부분의 정렬을 위해 margin값을 줬는데 이게... margin이 자꾸 외곽 div에 먹히네요... div안에서 내용나오는부분 p에 margin값이 적용 되어야되는데 이게 왜 적용이 안될까요.. 참고로 ie6,7에서는 원하는대로 나오고 ie8,파폭에선 div자체에 마진이 먹습니다.. ㅡㅡ;
-
마루한
그렇게 하면 ie6에선 괜찮은데 다른 브라우저에선 더블마진 문제 때문에요.. 더블마진 해결을 위해 display:inline을 해줘도 뭔가 해결이 안되는 부분이 있어서.. ;;
-
유리
inline-block을 줘서 하니까 브라우저마다 별 무리가 없이 나오네요~ 감사~ ^^
-
비예
junsi 에 padding으로 주세요.
exp에 단순 내용만 들어간다면 junsi 하나만 가지고 해결하실 수 있는데..ㅎ -
보미나
마진탑이 부모 엘리먼트에 적용되는거니, 마진탑 대신 부모엘리먼트(junsi)에 패딩탑으로 대체하는것으로.. 해결되실듯..
-
파란
id와 class에 float:left;를 주면 됩니다. 쓰고나서 clear:both; 는 꼭 해주시구요
-
후유
마진통합현상은 이런 경우에 일어납니다.
1. 인접한 엘리먼트의 margin-top값과 margin-bottom이 겹쳐지는 현상
2. 블록엘리먼트에 포함된 블록엘리먼트의 통합현상 (위에서 말씀드린 경우)
3. 블록엘리먼트에 포함된 인라인 엘리먼트의 좌우마진에 더블마진이 일어나지 않는경우?
안에 있는 .junsi .exp 값의 margin-top값을 빼시고
.junsi에 padding-top으로 대체하신다음 padding값만큼 height값을 줄여 -
찬솔큰
위의 코드만 볼때 더블 마진이 생기지 않을텐데....
.junsi{background:url(../sub2/images/sub0_bg.jpg) no-repeat left top; width:317px;height:537px;padding:240px 0 0 220px;}
.junsi .exp{color:#fff; width:280px;}
아니면
.junsi .exp{color:#fff; margin:240px 0 0 220px; width:280px; -
큰나라
.junsi{background:url(../sub2/images/sub0_bg.jpg) no-repeat; width:537px; height:777px; margin:0 auto;float:left;} 이렇게함 해보세요
저도 잘 하는건 아니라서 ^^;;; 조금이나마 도움이 되셨으면 좋겠네요 ^^