爲什麼不讓子div停留在同一行上，除非我向父級添加額外的寬度？

我正在用2個圖像的標題如下：爲什麼不讓子div停留在同一行上，除非我向父級添加額外的寬度？

<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個像素來自哪裏？

來源

2015-10-02 milky_jay

你試過嗎？ http://stackoverflow.com/questions/4760002/how-to-remove-image-padding-that-is-showing-up-unintentionally基本上添加顯示塊到您的圖像。 –

謝謝你們，刪除div之間的空白區域解決了它。我從來沒有遇到過這個問題，也許我從來沒有這樣做過 –

您正在處理內聯元素的特徵空間。

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

其他選項包括切緣陰性，省略結束標籤， 使用評論標籤,浮標和flexbox。請參閱本文的詳細信息，每個方法：

Fighting the Space Between Inline Block Elements

有關此問題的詳細信息，請參閱：

How to remove the space between inline-block elements?

來源

2015-10-02 01:10:38

謝謝@Michael_B，刪除了白色空間解決了它！ –

爲什麼不讓子div停留在同一行上，除非我向父級添加額外的寬度？

回答

相關問題