除非我为父级添加额外的宽度，否则为什么子级 div 不会留在同一行？ [复制]答案

【问题标题】：Why aren't child divs staying on the same row unless I add extra width to parent? [duplicate]除非我为父级添加额外的宽度，否则为什么子级 div 不会留在同一行？ [复制]
【发布时间】：2015-10-02 09:29:27
【问题描述】：

我正在制作带有 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 个像素来自哪里?

【问题讨论】：

你试过了吗？ stackoverflow.com/questions/4760002/… 基本上是为你的图片添加显示块。
谢谢大家，删除 div 之间的空白解决了它。我以前从来没有遇到过这个问题，也许我从来没有这样做过

标签： html css

【解决方案1】：

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

如果您在<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>

其他选项包括负边距、省略结束标签、使用注释标签、浮动和弹性盒。有关每种方法的详细信息，请参阅本文：

Fighting the Space Between Inline Block Elements

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

How to remove the space between inline-block elements?

【讨论】：

谢谢@Michael_B，去掉空格就解决了！