Question

所以我基本上得到了一个由边框分隔的项目列表。我想在每个项目的顶部和底部应用相等的填充和边距。

这是 fiddle ，其中包含我正在使用的简化版本。

现在，您看，我将10px的margin和padding应用于每个项目的顶部和底部，但这些项目的间距不均匀。每件商品上方的空间比下方更多。

我意识到这可能是CSS的collapsing margins behaviour的结果，并且我可以通过添加更多填充而不是边距来修复它以获得我想要的间距。

但问题是，对于某些项目，我想通过添加背景颜色来突出显示，例如fiddle。当我这样做时，顶部和底部的填充必须相同。

那么我该如何解决这个问题呢？我希望它具有超级灵活性，所以如果我喜欢的话，我可以自定义填充量和边距量，并且还可以移除边框但仍能正常显示。

HTML：

<div class="list">
  <div class="item">
    <span class="fill">&nbsp;</span>
  </div>
  <div class="item">
    <span class="fill">&nbsp;</span>
  </div>
  <div class="item">
    <span class="fill">&nbsp;</span>
  </div>
</div>

CSS：

.item {
  display: block;
  width: 150px;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  border-bottom: 1px solid red;
}

.fill {
  background-color: #aaa; 
  display: block;
  height: 150px;
}

.bg {
  background-color: #ccc;
}

Answer 1

Here is a fork of your fiddle

为了获得正确的对称，垂直间距，我实际上创建了一个1px div来替换你的边框：

<div class="myborder">&nbsp;</div>

与myborder类一样：

.myborder {
    heigth: 1px;
    background: red;
    font-size: 1px;
    margin-top: 10px;
    width: 150px;
}

border div放在项目div之间，如下所示：

<div class="item">
  <span class="fill">&nbsp;</span>
</div>
<div class="myborder">&nbsp;</div>
<div class="item bg">
  <span class="fill">&nbsp;</span>
</div>

在项目类中，我删除了border和margin-bottom属性：

.item {
    display: block;
    width: 150px;
    margin-top: 10px;
    /*margin-bottom: 10px;*/
    padding-bottom: 20px;
    padding-top: 20px;
    /*border-bottom: 1px solid red;*/
    background-color:yellow;
}

只要myborder的margin-top和item margin-top属性相等，您就会获得项目之间的对称垂直间距。

更新：在提供的分叉小提琴中，我还创建了一个不可见的边框类，正如你所提到的那样能够移除边框并保持适当的间距：

.myinvisibleborder {
    height: 1px;
    background: transparent;
    font-size: 1px;
    margin-top: 10px;
    width: 150px;
}

通过将背景设置为透明，它变得不可见;另一种方法是将height和font-size设置为0px;

Answer 2

问题的共鸣在于保证金本身。如果你提供的是然后它会从一些元素中占据一个空白。现在如果你间接地应用填充意味着你正在增加div大小。在你的问题中你可以通过制作顶部和底部边距来解决这个问题 0，而是将“.item”类中的填充加倍，如下所示：

.item {
    display: block;
    width: 150px;
    **margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 20px;
    padding-top: 20px;**
    border-bottom: 1px solid red;
}

这看起来很完美而不会触及其他代码段！

Answer 3

问题在于你看待事物的方式。填充和边距都相等，但由于您只有底部边框，因此无法看到它们。如果添加顶部边框（红色与底部边框相似），则可以看到项目之间的间距完全相同。

现在，如果你想解决问题，你必须考虑到你只有一个边框，所以你可以删除其中一个填充或边距。

编辑：用以下内容替换你的css代码，你应该达到你想要的目的：

.item {
display: block;
width: 150px;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid red;
}

编辑2：我刚刚意识到，由于你在第二个例子中突出显示，你会遇到另一个问题。所以你可能不得不从div中取出红线并将它们放入一个单独的实体中。

编辑3：这是一个更新的jsfiddle，希望它可以满足您的需求。

CSS边距和填充未应用

3 个答案: