边际上的保证金

Question

我有一个可以在两种情况下使用的块：

• 此类块的列表

• 个别区块放置在不同类别的

中

决定保证金的最佳做法是什么？

假设该块具有类main，并且第一个场景分别为preceding和following。

如果我为main设置了保证金，而对于第二种情况，我需要preceding和following来触摸main，那么我应该设置负余量＆＃39 ;先前和后续？

或另一种解决方案是使用直接同级选择器.main+.main设置边距，而不是.main设置边距。

我猜测我错过了其他一些解决方案。我可以知道其他可能的解决方案。此外，这里的最佳做法是什么？

Answer 1

解决此问题的一种方法是通过将其链接到您根据环境添加的另一个类来确定要在.main类div上设置的边距。这样，您可以将主div的所有共享功能保存在一个位置，只需区分边距（或任何其他需要不同的样式）。

DIV个人

<div class="main individual">

DIV与他人

<div class="main shared">

<强> CSS

.main {
   width:50px;
   height:50px;
}

.main.individual {
  margin: 5px;
}

.main.shared {
  margin:1px;
}

Answer 2

我通常只设置块的底部边距，以避免边缘崩溃。即。

.element {
    margin-bottom: 30px; /* or margin: 0 0 30px; */
}

我还建议每个块设置每个类，并在必要时使用共享类。即。

<div class="element element-1">...</div>
<div class="element element-2">...</div>

您可以轻松地将.element用于共享样式，使用.element-1和.element-2来处理不同的内容。