4

我有以下 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 的大小……我没有确定大小。我离开浏览器自动计算孩子的大小。

为什么会有这种行为？

4

2 回答 2

4

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

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

  1. 最小化 HTML。可能是最简单的方法。不要在代码中使用空格，只需将所有内容强制为一行，如下所示<section class="container"><div class="search"></div></section>：（警告：这是未经测试的。）
  2. 添加负边距：这有点小技巧，但您可以通过使用浏览器的检查元素功能来了解添加了多少空间，而不是将其设为负边距。也就是说，如果两个元素之间有 4px 的空间，则应用以下内容：margin:-4px;. （默认情况下，浏览器将在inline-block元素之间应用 4px 的边距空间。）如果您使用 em 或百分比，这可能适用于响应式设计。
  3. 用别的东西。如果你想vertical-align，那么inline-block并不总是要走的路。这是一个很好的资源：http: //phrogz.net/css/vertical-align/。
于 2013-06-28T01:34:42.920 回答
3

这是有关它的更多信息。

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

显示：inline-block 额外边距

于 2013-06-28T01:22:57.747 回答