星点互联edus视频培训演示站

标题: 请问如下为什么div会把margin伸出到header之外 [打印本页]

作者: 超级玛丽 时间: 2020-11-30 21:24
标题: 请问如下为什么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>

复制代码

作者: 冻GoldenJoe 时间: 2020-11-30 21:25
主要是因为 header 没有设置为 BFC 块，而且你给 header 设置了 height:10vh，这个高度不够包含下面两个div。

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

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

复制代码

加

overflow

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

欢迎光临星点互联edus视频培训演示站 (http://47.100.112.22/demo/edus/)