Question

我已获得以下HTML代码：

<section class="container">
    <div class="search"></div>
</section>

这些CSS规则：

*, *:before, *:after {
    box-sizing: border-box;
}

body, section, div {
    margin: 0;
    padding: 0;
}

html, body { height: 100%; }

.container {
    display: inline-block;
    position: relative;
}

.search {
    display: inline-block;
    padding: 3em;
    border: 1px solid black;
}

如果您检查section元素，您会发现它的大小为5px ......我没有确定大小。我假设浏览器会自动计算孩子的大小。

为什么会出现这种情况？

Answer 1

原因是您使用inline-block和container元素的search。我们的想法是inline-block将元素视为段落中的文本;那是inline。因此，虽然元素本身是block元素，但浏览器会在元素之间添加一些空格，因为HTML.中实际拥有的空格就像在p标记中添加空格放置空格一样在单词之间，在两个inline-block元素之间添加空格，在元素之间放置空格。

话虽如此，有几种方法可以解决这个问题：

最小化HTML。可能是最简单的方法。不要在代码中使用空格，只需将所有内容强制为一行，如下所示：<section class="container"><div class="search"></div></section>。（警告：这是未经测试的。）
添加负边距：这有点像黑客，但您可以通过使用浏览器的inspect元素功能找出添加了多少空间，而不是使用您的负边距。也就是说，如果两个元素之间有4px的空间，则应用以下内容：margin:-4px;。（默认情况下，浏览器将在inline-block元素之间应用4px的边距空间。）如果使用em或百分比，则可以使用响应式设计。
使用其他内容。如果您尝试vertical-align，那么inline-block并非总是如此。这是一个很好的资源：http://phrogz.net/css/vertical-align/。

Answer 2

以下是有关它的更多信息。

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

display: inline-block extra margin

CSS内联块维度差异

2 个答案: