Html 在水平行中放置div之间的间距？

我在一个水平行中有4个div。我想在div之间留出空间（我想是使用margin吧？），但是当我这样做时，div溢出了它们的父容器

在零边距的情况下，它们很好地排列在一行上：

A.
B
C
D

我建议将

div

s缩小一点，并增加一个百分比的余量

A.
B
C
D
这是因为
宽度
当提供
%
时，不考虑
填充
/
边距
s。您需要将金额减少到可能的
24%
或
24.5%
。完成后，您应该会很好，但如果您希望始终正确，则需要根据屏幕大小提供不同的选项，因为您有一个硬编码的边距，但有一个相对大小。
您可以设置
li
标签的左边距（以百分比为单位），并在父项上设置相同的负左边距：


ul{左边距：-5%；}
li{宽度：20%；左边距：5%；浮动：左；}

A
B
C
D
一个可能的想法是：

删除
宽度：25%；浮动：左来自您的div样式

将四个彩色div中的每一个都包装在一个div中，该div具有
style=“width:25%；float:left；”
这种方法的优点是，所有四列的宽度都相等，并且它们之间的间隙始终为5px*2

下面是它的样子：


.cellContainer{
宽度：25%；
浮动：左；
}

A.
B
C
D
有很多方法可以解决这个问题

使用框大小css3属性并用边框模拟边距。


另一个想法是：在div的另一边补偿你的保证金

例如，对于您希望实现的间距为10px的一侧，对于相反的一侧，使用-10px进行补偿。它对我有用。这可能不会在所有场景中都起作用，但根据您的布局和其他元素的间距，它可能会起到很好的作用
 将所有div放在单个表格单元格中，并将表格样式设置为
padding:5px

例如



A.
B
C
D
仅使用现有的无边距div作为包装div的可能重复。在每一个div中，你都会放入另一个div，该div包含内容，没有宽度和边距。或者你可以按照Pow lan的建议切换到100%的百分比。实现将取决于您需要的控制量。好的，这一个对于我的特殊情况最为方便，谢谢。如果链接中断，将代码内联到您的答案中是否有用@GolfWolf这比我提到的pastebin链接的代码多得多，我一定是从您包含的一个JSFIDLE链接中得到的。你发布的代码有很多多余的内容stuff@barlop正确的。我已经把多余的东西拿走了。
div.inside {
 width: 25%;
 float:left;
 border-right: 5px solid grey;
 background-color: blue;
 box-sizing:border-box;
 -moz-box-sizing:border-box; /* Firefox */
 -webkit-box-sizing:border-box; /* Safari */
}

<div style="width:100%; height: 200px; background-color: grey;">
 <div class="inside">A</div>
 <div class="inside">B</div>
 <div class="inside">C</div>
 <div class="inside">D</div>
</div>

.outer {
 width:100%;
 background:#999;
 overflow:auto;
}

.inside {
 float:left;
 width:24%;
 margin-right:1%;
 background:#333;
}