H5W3
当前位置:H5W3 > 问答 > 正文

请问如下为什么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>
<div>电站通讯</div>
<div>通讯正常</div>
</header>
</body>
</html>

回答

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

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

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

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

试试:

header {
    padding-top: 0px;  /* 不为空即可 */
}

本文地址:H5W3 » 请问如下为什么div会把margin伸出到header之外

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址