HTML (?!) :CSS는 : 테두리를 추가하면 배경색을 변경
<div> <p></p> </div>
CSS :
div { background-color:green; border-top:1px solid white; }
p { background-color:yellow; height:50px; margin:70px; }
데모 :http://www.jsfiddle.net/Xy8QF/4/
이유는 위의 영역입니다 노란색 단락 녹색 및 흰색 영역 bellow?
btw 나는 이미 이것을 알아 냈지만 어쨌든 이것을 게시 할 것입니다. 그것에게 수수께끼를 고려 :)
업데이트 :이 경우 (
의 두 블록 요소의 여백(기본값)은 CSS 2.1 8.3.1에 따라 축소됩니다. 즉, 여백은 body 요소로 "이월"됩니다. 이 demo은 위의 표준에 나열된 예외 중 하나 (비 none 경계와 함께) 중 하나에 배치 된 요소에서는 발생하지 않습니다.
맞음 :) .... –
왜냐하면 <p>이 동봉되어있는 바닥의 오른쪽에 있기 때문입니다. <div><div>의 높이를 제한하는 것이 없기 때문에 렌더링은 <p>의 맨 아래에 맞게 충분한 공간을 제공합니다. 명시 적 높이> 50 픽셀이면 하단이 표시됩니다.
그래, 업데이 트에서 정확히. 상자는 수직으로 확장되지만 수평으로는 확장되지 않습니다. 또한 패딩은 상자 안쪽에 공간을두기 때문에 p는 바운드에 대해 바로 위로 밀 수 없습니다. http://www.w3schools.com/css/css_boxmodel.asp 여기 : 여기 예를 들어, CSS 박스 모델에 최대 읽기
는 http://www.w3.org/TR/CSS21/box.html그럼 어떻게 설명합니까 : http://www.jsfiddle.net/Xy8QF/25/?':)' –
정확히 동일합니다. 이제는 div에 아래쪽 테두리가 있기 때문에 펼칠 자유로운 TOP입니다. –
당신이 그것을 넣어 노란색 단락 위의 영역, 그 위에 사실이 아니다. 녹색 div에는 노란색 단락이 있습니다. 노란색 단락의 여백은 70px이며 컨테이너의 녹색 가장자리에서 멀리 떨어집니다. 노란색 단락에는 높이가 설정되어 있으므로 하단 가장자리의 녹색에서 노란색이 밀려 나오는 것을 볼 수 없습니다.
단락에 높이를 지정하면 단락의 맨 위와 div의 맨 위 사이에 여백이 나타나지만 단락의 맨 아래와 div의 맨 아래에는 나타나지 않습니다. 문제가 확인됨에 따라, 그것은 국경 때문에, 그리고 질문은 "왜?"였습니다. – Quentin
내 대답이 잘못되었습니다. "노란색 단락 위의 영역이 녹색이고 흰색 영역 아래에있는 이유는 무엇입니까?"라는 질문에 대한 답변을 제공합니다. – DigiKev
높이는 50px이고 여백은 70px입니다. 높이를 5px로 설정하더라도 동일한 문제가 계속 발생합니다. http://www.jsfiddle.net/Xy8QF/26/ –
그건 별거 아니에요 '_weird_! – Kyle
그것은 제약 조건 해결 문제가위원회에 의해 지정 될 때 일어나는 일입니다. –
와우, 몇 달 동안 내 머리를 아프게했습니다! h1이 웹 사이트의 전체 콘텐츠 영역을 'h1'의 여백만큼 밀어내어 콘텐츠 영역과 헤더/메뉴 사이에 갭을 생성하면 정말 괴롭습니다. – mingos