Html CSS内联块尺寸差异

我得到了以下HTML代码：

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

如果您检查

部分

元素，您将看到它的大小为5px。。。我没有确定尺寸。我认为浏览器会根据孩子的大小自动计算

---

为什么会有这种行为？

以下是有关它的更多信息

---

原因是用于

容器

和

搜索

元素的

内联块

。其思想是

内联块

将元素视为段落中的文本；这就是内联的

。因此，虽然元素本身是

block

元素，但浏览器会在元素之间添加一些空格，因为

HTML中实际上有空格。

就像在

p

标记中添加空格会在单词之间加空格一样，在两个

内联块
元素之间添加空格会在元素之间放置空格

也就是说，有几种方法可以解决这个问题：

最小化HTML。可能是最简单的方法。不要在代码中使用空格，只需将所有内容强制放在一行，如：
。（警告：这未经测试。）
添加负边距：这有点麻烦，但您可以通过使用浏览器的inspect元素功能来确定添加了多少空间，然后将其设置为负边距。也就是说，如果两个元素之间有4px的空间，则应用以下命令：
margin:-4px。（默认情况下，浏览器将在
内联块
元素之间应用4倍的边距空间。）如果使用em或百分比，这可能适用于响应性设计

使用其他方法。如果要尝试
垂直对齐
，则
内联块
并不总是可行的方法。这是一个很好的资源：
尝试将
vertical align:top
添加到
.search
元素。@MaratTanalin我想知道为什么会发生这种行为=/而不是修复它这就是我一直在寻找的！非常感谢你！很高兴它有帮助！顺便说一句，我刚刚在一个地方试过你的案子。如果您正在寻找一个快速修复方案，那么选项2效果最好。如果可能的话，我会避免使用选项2，因为它取决于字体指标，而字体指标在不同平台之间可能不一致。
*, *: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;
}