Welcome To Ask or Share your Answers For Others

请问如下为什么div会把margin伸出到header之外

asked Jan 25, 2021 in Technique[技术] by 深蓝 (71.8m points)

请问如下为什么div会把margin伸出到header之外

请问如下为什么div会把margin伸出到header之外，如何，让他向上的margin在header内，就是从margin的border算起？

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<header style="margin:2vh;height:10vh;border-radius:1em;background-color:red">
 <div style="margin:5vh">电站通讯</div>
 <div style="margin:5vh">通讯正常</div>
</header>
</body>
</html>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

Welcome To Ask or Share your Answers For Others

1 Answer

answered Jan 25, 2021 by 深蓝 (71.8m points)

主要是因为 header 没有设置为 BFC 块，而且你给 header 设置了 height:10vh，这个高度不够包含下面两个div。

可以把header设置为BFC块，再去掉header的height，具体解决如下：

header {
    margin:2vh;
    border-radius:1em;
    background-color:red
    overflow:hidden;
}

加 overflow 这样header成为了 BFC块，就能包含住内部的元素了。

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

...