如何在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;
}

Answer 2

如果您想要例如10像素以上的边距和＆amp;在你的元素下面，一个选项可能是这样的。 class="card"内的所有元素都会受到相同边距的影响。

.card{
padding: 40px;
}

.card h1, .card p, .card .wedge-2x, .card a{
margin: 30px 0px;
}

Answer 3

这取决于您希望拥有多大的灵活性。 您的解决方案看起来是个好的开始。也许尝试使用兄弟选择器？

所以在scss中你会有类似的东西：

>>> from itertools import permutations
>>> list(permutations(range(1, 5), 4))
[(1, 2, 3, 4), (1, 2, 4, 3), (1, 3, 2, 4), (1, 3, 4, 2), (1, 4, 2, 3), (1, 4, 3, 2), (2, 1, 3, 4), (2, 1, 4, 3), (2, 3, 1, 4), (2, 3, 4, 1), (2, 4, 1, 3), (2, 4, 3, 1), (3, 1, 2, 4), (3, 1, 4, 2), (3, 2, 1, 4), (3, 2, 4, 1), (3, 4, 1, 2), (3, 4, 2, 1), (4, 1, 2, 3), (4, 1, 3, 2), (4, 2, 1, 3), (4, 2, 3, 1), (4, 3, 1, 2), (4, 3, 2, 1)]

如果您想要更具体的HTML结构，请使用.card { padding: 40px; h1 ~ p, h1 ~ a { margin-top: 10px; } } 代替+。

或者您可以使用~为所有元素重写此内容，除了第一个元素之外，使用margin-top