Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
961 views
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

0 votes
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块, 就能包含住内部的元素了。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...