48
Khi một phần tử có lề được chứa trong một phần tử khác, thì phần tử cha mẹ không liên tục bao bọc lề đó.Tại sao lề không được chứa bởi phần tử gốc?
Nhiều điều sẽ làm cho cha mẹ để quấn lề của trẻ:
- biên giới: rắn;
- vị trí: tuyệt đối;
- display: inline-block;
- overflow: auto
(. Và điều này chỉ từ thử nghiệm nhỏ, không có nghi ngờ có nhiều)
tôi sẽ giả định này đã làm với biên độ sụp đổ, nhưng:
- Trang thông số W3C không có mô tả về hành vi đó.
- Không có chênh lệch chồng chéo nào ở đây.
- Hành vi của tất cả các trình duyệt có vẻ nhất quán với vấn đề này.
- Các hành vi bị ảnh hưởng bởi trigger mà không liên quan đến lề
logic mà một yếu tố mà mặc định là tràn là gì: tự động nên chứa tài liệu khác so với một nơi tràn được thiết lập để tự động .
Tại sao mọi thứ nhưng hành vi mặc định của div thông thường giả định rằng lề được chứa bởi phụ huynh - và tại sao mặc định thông thường không bao gồm ký quỹ?
EDIT: Câu trả lời cuối cùng là W3C thực sự xác định hành vi này, nhưng điều đó
- Các thông số kỹ thuật không thực sự có ý nghĩa gì.
- The specs mix, without any word of explanation:
- 'lề miễn phí' (lợi nhuận đó sẽ chạm vào đầu hoặc cuối của cha mẹ của họ không được chứa bởi công ty mẹ) và
- 'sụp đổ lề' (lề liền kề được phép chồng chéo lên nhau).
Demo:
<!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>`
Tôi không hiểu bạn đang hỏi gì. Bạn có hỏi tại sao các phần tử h1 hiển thị bên trong các phần tử vùng chứa không? Hãy rõ ràng hơn với câu hỏi của bạn. –