删除div块之间的空白

Question

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/

Answer 1

use:

 .accordion {font-size:0px; }

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

Answer 2

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>

Answer 3

Inline-block tends to add these spaces because it picks up on spaces/text between tags (including new lines). To remove these white paces, comment out the area between the DIVs like so

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

Answer 4

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 .

Answer 5

You can do this with several ways

1. .accordion {font-size:0px; }

2.  .accordionitem{margin-right: -4px;}

3.  <div class="accordion">
        <div class="accordionitem horizontal"></div><!--
        --><div class="accordionitem vertical"></div><!--
        --><div class="accordionitem vertical"></div>
    </div>

reference link