Question

我正在尝试将这些“块”与它们之间的一些边距堆叠起来。问题是它们没有“阻塞”它们之间有3个像素的空间。它们只是堆叠在一起（典型的div标签）。

<div style="display: inline-block; margin: 3px; vertical-align: middle;">
    <div style="background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px;"></div>
</div>

为什么不起作用？演示：http://jsfiddle.net/edgren/Y9gCG/

提前致谢。

Answer 1

您应该使用样式表。

其他的， inline-block和其他css语句必须位于子div上：

<div>
    <div style="margin: 3px; vertical-align: middle; display: inline-block; background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="margin: 3px; vertical-align: middle; display: inline-block; background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="margin: 3px; vertical-align: middle; display: inline-block; background-color: #000000; height: 100px; width: 100px;"></div>
    <div style="margin: 3px; vertical-align: middle; display: inline-block; background-color: #000000; height: 100px; width: 100px;"></div>
</div>

带有样式表：*

CSS

.child{
    margin: 3px;
    vertical-align: middle;
    display: inline-block;
    background-color: #000000;
    height: 100px;
    width: 100px;
}

HTML

<div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

Answer 2

在内部div上应用边距，而不是父级。

Answer 3

这是一个显示如何操作的小提琴：http://jsfiddle.net/Y9gCG/3/

div.container div {
 margin-bottom:3px;
 background-color: #000;
 height: 100px;
 width: 100px;"
}

Answer 4

您要将margin和inline-block属性添加到父元素而不是子元素，请将代码更改为：

<div>
    <div style="background-color: #000000; height: 100px; width: 100px; display: inline-block; margin: 3px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px; display: inline-block; margin: 3px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px; display: inline-block; margin: 3px;"></div>
    <div style="background-color: #000000; height: 100px; width: 100px; display: inline-block; margin: 3px;"></div>
</div>

它应该有用。

内联块不会堆叠我的“块”

4 个答案: