为什么除非我为父母增加额外的宽度，否则不会将子div留在同一行？

Question

我正在制作带有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或更大，孩子divs低于对方，我不明白为什么183 + 355 = 538，哪里是额外的4个像素来自？

Answer 1

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

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

解决问题的最快方法是：

1. 将font-size: 0添加到父元素。在您的代码中，只需： div { font-size: 0; }，或者

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>

其他选项包括负边距，省略结束标记，使用评论标记，浮动和 Flexbox的。有关每种方法的详细信息，请参阅此文章：

• Fighting the Space Between Inline Block Elements

有关此问题的详细信息，请参阅：

• How to remove the space between inline-block elements?