gpt4 book ai didi

html - 段落不尊重标题边距

转载 作者:搜寻专家 更新时间:2023-10-31 23:01:22 26 4
gpt4 key购买 nike

所以我想在页面上设置垂直节奏。但是 p 不遵守 h1 的底部边距。有人可以向我解释为什么吗?

这是我的代码(em 单位会更好,但为了简单起见,我使用了像素):

html {
font - size: 18px;
line - height: 1.5;
}

h1 {
font - size: 30px;
line - height: 1.5;
margin: 4.5px 0 4.5px;
}

p {
margin: 27px 0;
}
<body>
<h1>blaasdfasf</h1>
<p>...</p>
</body>

编辑:

在这里你可以明白我的意思:

h1 preview

p preview

如您所见,h 的边距将被忽略。

最佳答案

它被称为“Collapsing margin”,并且有很多关于它的话题。基本上较大的 margin 会很重要,这很常见。您所能做的就是增加较大的边距或更改您的 HTML 元素。您可能喜欢阅读:


一个好的解决方案是为 p 元素创建一个容器到 div 中,并将其放在 padding-top 属性中。有了它,内容将有自己的边距:

html {
font-size: 18px;
line-height: 1.5;
}

h1 {
font-size: 30px;
line-height: 1.5;
margin: 4.5px 0 15px;
overflow:auto;
}

#margin {
padding-top:15px;
}
<h1>blaasdfasf</h1>
<div id="margin">
<p>...</p>
</div>

或者直接将 padding 应用到 p 元素中:

p {
padding-top:15px;
}

关于html - 段落不尊重标题边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29763633/

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