html - 除非我为父级添加额外的宽度，否则为什么子级 div 不在同一行？

<分区>

我正在制作一个包含 2 张图片的标题，如下所示:

<div id="header-logo">
    <div class="header-logo"><img src="logo.png"></div>
    <div class="header-name"><img src="logo-name.png"></div>
</div>

使用以下 CSS:

#header-logo { width: 538px; margin: 0 auto; }
#header-logo div { display: inline; height: auto; }
#header-logo div.header-logo { width: 183px; }
#header-logo div.header-name { width: 355px; }

问题是，除非我将父 div (#header-logo) 设置为 542px 或更大，否则子 div 会相互下方，我不明白为什么 183 + 355 = 538，额外的 4 个像素来自哪里？

最佳答案

您正在处理内联元素特有的空格。

如果您在 <p> 中编写文本元素，然后点击空格键或添加换行符，该空格由浏览器呈现。同样的行为适用于所有内联元素，例如图像和输入。

解决问题最快的方法是:

添加font-size: 0到父元素。在您的代码中，只需执行以下操作: div { font-size: 0; } , 或者
删除元素之间的所有空格和换行符:

<div id="header-logo"><div class="header-logo"><img src="logo.png"></div><div class="header-name"><img src="logo-name.png"></div></div>

其他选项包括负边距、省略结束标记、使用注释标记、 float 和 flex 盒子。有关每种方法的详细信息，请参阅本文: