Question

块元素的边距会崩溃，但不会内联块有没有办法强制内联块边缘崩溃？

.wrapper {
    position: relative;
    float: left;
    width: 100px;
    margin: 10px;
}

.wrapper .el {
    display: inline-block;
    width: 100%;
    height: 20px;
    background: #000;
    margin: 10px 0;
}

.wrapper.block .el { display: block; }

<div class="wrapper">
    <div class="el"></div>
    <div class="el"></div>
    <div class="el"></div>
</div>

<div class="wrapper block">
    <div class="el"></div>
    <div class="el"></div>
    <div class="el"></div>
</div>

有人有想法吗？
我已经阅读了MDN上的文档。

Answer 1

规范中记录了内联块元素的边距不会崩溃：

<强> 8.3.1 Collapsing margins


浮动框和任何其他框之间的边距不会崩溃（甚至在浮动及其流入子项之间也不会崩溃）。

建立新的块格式化上下文的元素的边距（例如浮点数和带溢出的元素＆＃39;除了＆＃39;可见＆＃39;）   与流动的孩子不会崩溃。

绝对定位的盒子的边距不会崩溃（甚至没有流入的孩子）。

内嵌块框的边距不会崩溃（即使是流入的子项也不会崩溃）。

...

因此答案是否。您可能需要更改元素的边距。

Answer 2

答案是＆＃34; no＆＃34;因为那不是内联盒如何工作所以它不能像你要求的那样被迫。其他任何东西都只是操纵元素的边缘，这只是一个技巧或黑客。

Answer 3

如果我说得对，你想删除inline-block个元素已赋予font-size: 0;到相应div的父元素的额外余量。

查看这篇文章：

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

内联块元素的保证金崩溃？

3 个答案: