gpt4 book ai didi

css - 居中的 div 底部边距溢出父级

转载 作者:行者123 更新时间:2023-11-28 10:41:52 24 4
gpt4 key购买 nike

我居中的页眉底部边距溢出父容器,导致黄色和橙色 wrapper 之间出现间隙:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
.header-wrap{
background-color:yellow;
}
.content-wrap{
background-color:orange;
}
.header{
margin:0 auto 1em auto;
background-color: red;
width:40em;
}
</style>
</head>
<body>
<div class="header-wrap">
<div class="header">header</div>
</div>
<div class="content-wrap">
<div class="content">content</div>
</div>
</body>
</html>

如果我对父 .header-wrap{overflow:hidden;} 使用简单的 clearfix,问题就解决了,但我不明白为什么我需要在这里使用 clearfix,因为我我根本不使用 float 元素。

据我所知,clearfix 应用于父级以清除内部所有 float 的子级,这里不是这种情况。

谁能解释为什么会这样?

最佳答案

.header{
margin:0 auto 1em auto; //margin 1em at bottom
background-color: red;
width:40em;
}

改成

.header{
margin:0 auto;
background-color: red;
width:40em;
}

DEMO

关于css - 居中的 div 底部边距溢出父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23103849/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com