Remove white space between div blocks

How can I remove these white space blocks around my div blocks? My code is the following:

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/

---

You could also remove the display: inline-block from the CSS and add float: left :

.accordion: after {
    clear: both;
}

.accordionitem {
    background-color: green;
    float: left;
}

Fiddle.

---

use:

 .accordion {font-size:0px; }

This is happening because display:inline-block; makes the DIV's behave like inline elements (like space between words)

---

You need to remove the space between the 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>

for better readability you can do

<div class="accordion">
    <div class="accordionitem horizontal">
    </div><div class="accordionitem vertical">
    </div><div class="accordionitem vertical">
    </div>
</div>

链接地址: http://www.djcxy.com/p/15792.html

上一篇: 块元素和块元素

下一篇: 删除div块之间的空白区域