内联块周围的空间

Question

请考虑此Codepen：http://codepen.io/anon/pen/WooLwL

在一个容器div中有3个div，并且所有div的宽度总和为960.但是经过检查，div周围有这个空白区域，我无法通过CSS摆脱它。我已经确认保证金是0。

<div id="columncontainer">
  <div id="column1">
    yolo
  </div>
  <div id="column2">
    <hr>
    all column 2 data here
    <hr>
  </div>
  <div id="column3">
    all column 3 data here
  </div>
</div>

Answer 1

添加

div{
  float:left;
}

将解决内联块问题

body{
  background-color: #ccc; // page background color
}
div{
  float:left;
}
#columncontainer {
width: 960px;
margin: 0 auto;
}

#column1 {
    display: inline-block;
    width: 240px;
    margin: 0;
    padding: 0;
  background: #b3e;
}

#column2 {
    display: inline-block;
    width: 480px;
    margin: 0;
    padding: 0;
  background: #555;
  
} 

#column3 {
    display: inline-block;
    width: 240px;
    margin: 0;
    padding: 0;
    background: #999;
}

#footer {
clear: both;
}

#image {
margin-left: auto;
}

#columncontainer {
background-color: white;
}

<h1>Inline Block Nerd Zone</h1>

<div id="columncontainer">
<div id="column1">
yolo
</div>

<div id="column2">
<hr>
all column 2 data here
<hr>
</div>

<div id="column3">
all column 3 data here
</div>
</div>

Answer 2

你需要添加float：left

div#columncontainer div {
    float: left;
    position: relative;
}

选中此codepen