删除div块之间的空白区域
我怎样才能删除我的div块周围的这些空白块？ 我的代码如下：
HTML：
<div class="accordion">
<div class="accordionitem horizontal"></div>
<div class="accordionitem vertical"></div>
<div class="accordionitem vertical"></div>
</div>
CSS：
html {
margin: 0px;
padding: 0px;
}
.accordion {
width: 100%;
}
.accordionitem {
display: inline-block;
background-color: green;
padding:0;
margin:0;
}
.vertical {
width: 10%;
height: 100px;
}
.horizontal {
width: 80%;
height: 100px;
}
DEMO：
http://jsfiddle.net/PqkGh/2/
你也可以从CSS中删除display: inline-block并添加float: left ：
.accordion: after {
clear: both;
}
.accordionitem {
background-color: green;
float: left;
}
小提琴。
使用：
.accordion {font-size:0px; }
这是因为display：inline-block; 使得DIV的行为类似于行内元素（如词语之间的空间）
你需要删除divs之间的空间
http://jsfiddle.net/PqkGh/3/
<div class="accordion">
<div class="accordionitem horizontal"></div><div class="accordionitem vertical"></div><div class="accordionitem vertical"></div>
</div>
为了更好的可读性，你可以做
<div class="accordion">
<div class="accordionitem horizontal">
</div><div class="accordionitem vertical">
</div><div class="accordionitem vertical">
</div>
</div>