48
여백이있는 요소가 다른 요소 내에 포함되어 있으면 부모가 해당 여백을 일관되게 래핑하지 않습니다.부모 요소에 여백이 포함되지 않는 이유는 무엇입니까?
많은 일들이 아이의 마진을 래핑하는 부모의 원인이됩니다
- 국경 : 고체;
- 위치 : 절대;
- 디스플레이 : 인라인 블록;
- 오버 플로우 : 자동
(. 그리고 이것은 단지 작은 시험에서, 의심의 여지가 더 없다가)
나는이 가정 것은 붕괴 마진과 관련이있다, 그러나 :
- W3C 사양 페이지에는 이러한 동작에 대한 설명이 없습니다.
- 여기에는 겹치는 여백이 없습니다.
- 모든 브라우저의 동작이이 문제와 일치하는 것으로 보입니다. 자동 오버 플로우가 자동으로 설정되어있는 것보다는 다른 재료를 포함해야합니다 :
- 이 동작은하는 기본값 요소가 오버 플로우하는 논리는 무엇 여백
관련이없는 트리거에 의해 영향을 받는다 .
정규 div의 기본 동작을 제외한 모든 동작에서 마진이 부모에 포함되어 있다고 가정해야하는 이유는 무엇입니까? 또한 일반 기본 값에 여백이없는 이유는 무엇입니까?
편집 : 마지막 대답은 W3C가 정말이 동작을 지정 않는다는 것입니다,하지만
- 사양은 정말 이해가되지 않습니다.
- The specs mix, without any word of explanation :
- '무료 마진'(부모의 상단 또는 하단을 터치 것이다 마진은 부모에 포함되지 않음) 및 은 (인접한 여백이 겹쳐 허용) '마진 붕괴'.
데모 : CSS는 according to W3C 어떻게 작동하는지
<!doctype html>
<html>
<head>
<title>Margins overextending themselves</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
body{
margin:0;
}
div.b{
background-color:green;
}
div.ib{
display:inline-block;
background-color:red;
}
div.pa{
background-color:yellow;
position:absolute;
bottom:0; right:0;
}
div.oa{
background-color:magenta;
overflow:auto;
}
div.brdr{
background-color:pink;
border:solid;
}
h1{margin:100px; width:250px; border:solid;}
</style>
</head>
<body>
<div class="b">
<h1>Is the margin contained?</h1>
</div>
<div class="ib">
<h1>Is the margin contained?</h1>
</div>
<div class="pa">
<h1>Is the margin contained?</h1>
</div>
<div class="oa">
<h1>Is the margin contained?</h1>
</div>
<div class="brdr">
<h1>Is the margin contained?</h1>
</div>
</body>
</html>`
나는 당신이 무엇을 요구하고 있는지 이해하지 못한다. h1 요소가 컨테이너 요소 안에 표시되는 이유는 무엇입니까? 귀하의 질문에 더 분명히하십시오. –