为什么我要创建的这些列之间有间距？

Question

我只是为了实验目的而尝试创建一个三列布局，但是当我尝试让这些列内联时，它们之间会出现一个间隙，这将显示在我链接的 Codepen 中。

我正在尝试仅使用百分比值而不使用 flex 之类的东西来完成此操作，我是否遗漏了什么？

Codepen Link: 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;
}

Answer 1

您可以将 inline-block 元素视为 个单词 ，因此单词之间的空隙是正常的 space。

摆脱它的一种方法是删除 HTML 代码中的 spaces，如：

<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>

这是您审查过的代码笔 http://codepen.io/jpedroribeiro/pen/egOebg

为什么我要创建的这些列之间有间距？

Why is there spacing in-between these columns that I am trying to create?

html

css

inline