未应用 CSS 边距和填充答案

【问题标题】：CSS margin and padding not being applied未应用 CSS 边距和填充
【发布时间】：2015-06-20 09:05:17
【问题描述】：

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

这是一个 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;
}

【问题讨论】：

请编辑您的问题以包含相关的 HTML 和 CSS 作为代码 sn-ps（除了非常有用的 jsfiddle 项目）。
我只是认为将 HTML 和 CSS 放在条目底部是非常多余的，因为无论如何每个人都只会在 jsfiddle 中查看它。不过没关系

标签： css margin padding

【解决方案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 放置在 item 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 和项目的 margin-top 属性相等，您将在项目之间获得对称的垂直间距。

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

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

通过将背景设置为透明，它变得不可见；另一种方法是将高度和字体大小设置为 0px;

【讨论】：

我想这可能是我问题的最佳答案。我不想在 html 中添加更多标记，所以我最终只使用了填充，项目上没有边框

【解决方案2】：

问题的根源在于边距本身。如果您提供一个边距，那么它将从 provious 元素中占用一个空白空间。现在如果您正在间接应用填充方式，您正在增加 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;
}

这看起来很完美，无需触及其他代码段！

【讨论】：

【解决方案3】：

问题在于你看待事物的方式。内边距和边距都是相等的，但你看不到它们，因为你只有一个底部边框。如果添加一个顶部边框（红色和底部一样），您可以看到项目之间的间距完全相同。

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

编辑：将您的 css 代码替换为以下内容，您应该可以实现您想要的：

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

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

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

【讨论】：