스타일시트 margin 값 적용 질문 채택완료
아래 노란색 부분의 margin 값이 왜 안 먹힐까요? ㅡㅡ;;; 이 상황에서 왜 margin값이 적용 안 되는지 궁금해 미치겠습니다. ㅎ
증상 확인: http://jsfiddle.net/k82fpzkm" target="_self" style="font-size: 10pt; line-height: 1.5;">http://jsfiddle.net/k82fpzkm
또,
#box에 display:table-cell;을 적용하면 상단 margin값이 적용되긴 하는데,
좌우 margin에 해당하는 auto가 작동 않습니다. 이것도 왜 그런지 알고 싶습니다.
증상 확인 : http://jsfiddle.net/2h66ra1p/" target="_self">http://jsfiddle.net/2h66ra1p/ (화면 중앙이 아닌 왼쪽 상단 구석에 붙음)
PS.
padding 값 적용 방법은 제외.
맨 바깥 div를 display:table-cell 속성 넣는 법 제외
답변 1개
CSS에서 두 개 이상의 마진(margin)이 세로 방향으로 만났을 때 마진이 겹치는 현상으로,
위 엘리먼트의 마진과 아래 엘리먼트의 마진이 만나게 되면, 웹 브라우저는 두 마진중에서 더 큰 쪽의 마진을 적용하게 됩니다(두 마진이 같다면 하나만 적용). 즉, 50px과 50px이 만나서 100px이 되는 것이 아니라 두 마진이 겹쳐져서 50px의 마진만 적용되는 것이죠.만약, 100px의 공간이 생기도록 하려면, 위나 아래 엘리먼트중 하나의 마진을 패딩(padding)으로 바꿔야 합니다.
지식인 펌.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
top 하단과 middle 상단의 margin 값 중 큰 것만 적용되겠지만,
<div class='top'> 상단엔 선택자 top의 상단 margin과 겹쳐질만한 div 요소가 아예 없으니까 위 내용과는 무관한 것 같은데요.