爲什麼在我嘗試創建的這些列之間存在間距？

我想創建一個僅用於實驗目的的三列布局，但是當我嘗試讓這些列內聯時，它們之間會出現一個間隙，這些間距將顯示在我已鏈接的Codepen中。爲什麼在我嘗試創建的這些列之間存在間距？

我想完成這個只是使用百分比值，而不使用像flex一樣的東西，有什麼，我失蹤？

Codepen鏈接：http://codepen.io/benrichi/pen/MJgOze

HTML

<head> 
<title>Column Exercise</title> 
</head> 
<body> 
<div id="col1"> COLUMN 1 CONTENT TO BE PLACED HERE</div> 
<div id="col2"> COLUMN 2 CONTENT TO BE PLACED HERE </div> 
<div id="col3"> COLUMN 3 CONTENT TO BE PLACED HERE</div> 
<div id="footer"> FOOTER CONTENT TO BE PLACED HERE</div> 
</body> 
</html>

CSS

#col1 { 
background-color:aqua; 
margin: 0; 
padding: 0; 
width: 30%; 
display: inline-block; 
height: 800px; 
} 

#col2 { 
background-color: antiquewhite; 
margin: 0; 
padding: 0; 
width: 30%; 
display: inline-block; 
height: 800px; 
} 

#col3 { 
background-color: aliceblue; 
margin: 0; 
padding: 0; 
width: 30%; 
display: inline-block; 
height: 800px; 
} 

#footer { 
margin: auto; 
width: 90%; 
background-color: aquamarine; 
height: 200px; 
}

來源

2017-01-01 BenRichi_

https://css-tricks.com/fighting-the -space-between-inline-block-elements/ – sinisake

@sinisake謝謝你的鏈接，這非常有幫助！ –

你可以認爲inline-block元素話的，這樣的差距是在單詞之間的正常空間。擺脫的那個

一種方法是去除的HTML代碼的空間，如：

<div id="col1"> COLUMN 1 CONTENT TO BE PLACED HERE</div><div id="col2"> COLUMN 2 CONTENT TO BE PLACED HERE </div><div id="col3"> COLUMN 3 CONTENT TO BE PLACED HERE</div><div id="footer"> FOOTER CONTENT TO BE PLACED HERE</div>

這裏的審查的youre codepen http://codepen.io/jpedroribeiro/pen/egOebg

來源

2017-01-01 14:58:23 jpedroribeiro

好的，好的，謝謝你，有沒有辦法讓三列像腳註一樣排列，頁腳的邊距設置爲自動，以便它位於顯示的中間，但我似乎無法讓列做到這一點 –

啊，是的，我想如果你添加一個容器來包裝它們，我已經更新了CodePen。 – jpedroribeiro

是的，這是我一直在嘗試做的，但它只是不好！所以，當你將33.33％的寬度應用於列時，這是否意味着他們將是他們父母的33.33％，這是容器而不是現在的身體？ –

爲什麼在我嘗試創建的這些列之間存在間距？

回答

相關問題