html - 如何在 html 元素之间创建一致的间距？

Question

我即将开始一个大型的、以设计为导向的网站，该网站必须像素完美且尽可能好。

问题是如何保持容器中元素之间的间距一致，如下所示:

目前我创建所有容器padding: 40px 40px 30px 每个元素都有 margin-bottom: 10px;

这很好地解决了这个问题，但是每个元素(包括标题)都必须在其下方正好有 10 个像素，在其上方有零个像素。

目前我也在用https://github.com/kiskadigitalmedia/kiskabricks_wedgecss (设置高度的 div)以在设计需要时创建额外的垂直空白。喜欢这里:

这是上面例子的代码:

<div class="card">
    <h1>Heading 1</h1>
    <p>Paragraph text</p>
    <div class="wedge-2x">
    <a class="btn">Button</a>
</div>

这种方法有意义吗？有没有更好的方法来保证容器内元素的间距一致？任何意见表示赞赏。

Answer 1

我会这样做:

<div class="card">
    <h1>Heading 1</h1>
    <p>Paragraph text</p>
    <a class="btn">Button</a>
</div>

CSS:

.card {
    padding: 40px;
    box-sizing: border-box;
}
h1, p {
    margin-bottom: 10px;
}
.btn {
    margin-top: 20px;
    display: inline-block;
}