未使用CSS边距和填充

所以我基本上有一个项目列表，用边框分隔。我希望将相同的填充和边距应用于每个项目的顶部和底部。未使用CSS边距和填充

这里是一个fiddle包含我正在使用的简化版本。

现在，您会看到，我已将0123px和padding的10px应用于每个项目的顶部和底部，但这些项目的间距不均匀。每个项目上面的空间比下面的要多。

我意识到这可能是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; 
}

来源

2015-04-14 eshellborn

请编辑您的问题，包括相关的HTML和CSS作为代码片段（除了jsfiddle项目，这是非常有用的）。 – dgvid

我只是认为把HTML和CSS放在条目底部是非常多余的，因为每个人都会在jsfiddle中查看它。但好的 – eshellborn

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

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

编辑：用以下内容替换你的CSS代码，你应该实现你想要的：

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

编辑2：我刚刚意识到，因为在你的第二个例子你的高亮显示的，你会碰到另一个问题。所以你可能需要从div中取出红线并将它们放入一个单独的实体中。

编辑3：这是一个jsfiddle与更新，希望它做你想做的。

来源

2015-04-14 16:47:38 IronWilliamCash

Here is a fork of your fiddle

要实现正确对称的，垂直间距，其实我创建了一个1px的div来替换你的边界：像这样与myborder类

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

：

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

边框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和项目的margin-top属性是相同的。

UPDATE：在所提供的，分叉的小提琴，我还创建了一个无形的边界类，如你所提到的能够删除边框，并保持适当的间距：

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

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

来源

2015-04-14 17:21:44 Manube

我想这可能是我的问题的最佳答案。我不想为html添加更多标记，所以我最终只使用了填充，并且没有边框 – eshellborn

问题的共鸣在于保证金本身。如果您提供的保证金是，那么它会占用一个空白的空间。现在如果您正在应用填充意味着间接地增加div大小。在这里，你的问题ü可以通过在“.item”一流的制作上下页边距 0，而是加倍填充如下解决这个问题：

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

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

来源

2016-02-23 13:07:24

未使用CSS边距和填充

回答

相关问题