輸入元素後的未知空間

我無法理解其中一個div的間距，因爲輸入元素的右側似乎有一些未知的空白。我有寬度684px一個div，含有2個輸入元件具有以下的CSS：輸入元素後的未知空間

width: 290px; 
padding-left:10px; 
padding-right:0px; 
border:1px solid black; 
margin-left:20px; 
margin-right:20px;

我期待的2輸入的下漂浮到彼此作爲我設置了容器div的寬度由所佔據的總空間2個輸入框：580（寬度）+20（左側填充）+80（左側和右側頁邊距）+4（邊框）= 684.但是，在此寬度下，第二個輸入框顯示在第一個輸入框下方。只有當容器div的寬度設置爲最小值689px時，輸入框纔會彼此相鄰。請注意，容器div的邊距和填充都設置爲0。我使用2個瀏覽器檢查了所有元素，並且大小與上面所述的相對應。什麼是佔用額外的5個像素（689-684像素）？

來源

2014-08-28 RunLoop

你有小提琴嗎？ – 2014-08-28 08:05:59

@ Mr.Alien換句話說，你不知道答案... – RunLoop 2014-08-28 09:51:08

@RunLoop你可以判斷，從看到我的個人資料，也沒有人會嘗試回答，如果你以這種方式解釋他們，分享你的代碼以適當的格式，準確解釋這個問題，然後你肯定會得到一些有用的答案。 – 2014-08-28 10:24:50

似乎瀏覽器在某些元素中保留空間，即使它們沒有內容，例如div的。通過將這些元素的字體大小設置爲0，可以有效地消除這種空間。如@mikedidthis指出的，可以找到詳細解釋here。

來源

2014-09-03 08:16:43 RunLoop

如果他們堅持讓他們都浮在左邊。默認情況下它們是內聯塊所以它實際上是很正常的內聯元素

編輯之間的空白：查看評論和TKS交付此鏈接 Display: Inline block - What is that space?

這正是我的意思......我只是懶得寫出來......經驗教訓。

來源

2014-08-28 08:08:55

雖然這確實有效，我仍然想明白爲什麼會有內聯元素之間未知的空白空間 – RunLoop 2014-08-28 09:52:34

@RunLoop它不是未知數：http://stackoverflow.com/a/16679004/2312574 – mikedidthis 2014-08-28 10:32:55

@mikedidthis非常感謝 - 這是有道理的，並解釋它。如果你添加你的鏈接作爲答案，我會接受它。 – RunLoop 2014-08-28 10:37:03

輸入元素後的未知空間

回答

相關問題