为什么在我尝试创建的这些列之间存在间距？

我想创建一个仅用于实验目的的三列布局，但是当我尝试让这些列内联时，它们之间会出现一个间隙，这些间距将显示在我已链接的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％，这是容器而不是现在的身体？ –

为什么在我尝试创建的这些列之间存在间距？

回答

相关问题