Remove white space between div blocks

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/

Thank you all, I've got my solution now :) Need just a few minutes to mark it. — TobiasW, Jun 18 '14 at 13:15
possible duplicate of [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Huangism, Jun 18 '14 at 13:18
Font size works, you could also use line-height `.accordion { line-height:0em; }` — superUntitled, Jun 18 '14 at 13:24

score 4 · Answer 1 · answered Jun 18 '14 at 13:11

4

use:

 .accordion {font-size:0px; }

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

answered Jun 18 '14 at 13:11

webkit

3,349
1
16
18

Well that was easy... Thanks! – TobiasW Jun 18 '14 at 13:12
This is more or less a hack even though I thought this is the correct way to go – Huangism Jun 18 '14 at 13:12
sure.. just remember to give font-size to any inner element with text in it ;) – webkit Jun 18 '14 at 13:12
@Huangism using 'display:inline-block' is becoming a pretty popular solution for this type of stuff.. you can say it's a hack but I think this should be the natural behavior of 'inline-block' and might end up in the specs.. who knows. – webkit Jun 18 '14 at 13:14
@webkit It's behaving the way it should be, the space is due to just that the space between each of the inline blocks. Just like when you have a space between spans. While this solution is handy but it forces you to give the children a proper font size. – Huangism Jun 18 '14 at 13:17
@Huangism I know why there's a space, I'm saying I can't think of a case where I would change a 'block' element into 'inline-block' and still require the 'inline' spacing... Maybe it should remain when changing 'inline' elements to 'inline-block'.. or 'block' elements to 'inline'.. but that's just my opinion – webkit Jun 18 '14 at 13:21
@webkit I believe this is more about semantics than changing elements from inline or block to inline-block – Huangism Jun 18 '14 at 13:23
This isn't a hack, but it's borderline. As long as you don't accidentally apply it to any unintended elements, it should do exactly what is intended. – Alex W Jun 18 '14 at 13:35
@AlexW I agree. when I recall the hacks we used in the past for the likes of IE666, this one seems 100% semantically correct to me ;] – webkit Jun 18 '14 at 13:48

score 4 · Accepted Answer · answered Jun 18 '14 at 13:14

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.

answered Jun 18 '14 at 13:14

cohenadair

2,072
1
22
38

I do not know why this was down-voted, it seems to be a fine way to do this. – superUntitled Jun 18 '14 at 13:23
I like this one the most, just because I want to add a list inside the big div and that's working just fine with this solution. – TobiasW Jun 18 '14 at 13:25
I don't think using float for the layout is necessary, or beneficial in any way, in this case. – Alex W Jun 18 '14 at 13:27

score 3 · Answer 3 · answered Jun 18 '14 at 13:12

3

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>

answered Jun 18 '14 at 13:12

Huangism

16,278
7
48
74

Thanks but I like the css the most, so I can just keep my HTML formating – TobiasW Jun 18 '14 at 13:13
3

@lordkain this isn't a workaround. It's the proper way to get rid of the space. The space is there because there is a space in the html – Huangism Jun 18 '14 at 13:19

score 3 · Answer 4 · answered Jun 18 '14 at 13:12

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>

score 1 · Answer 5 · answered Jun 18 '14 at 13:17

1

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

answered Jun 18 '14 at 13:17

Dhaval Panchal

648
6
26

1

@DhavalPanchal I don't agree with 1 or 2, as 3 is the proper way, but they all work – Huangism Jun 18 '14 at 13:24
@DhavalPanchal I would have to disagree with Chris Coyier in this case. Option number two is a maintenance nightmare. – superUntitled Jun 18 '14 at 13:27
Several contributors have used “proper” or “correct” to define their approach. Would anyone care to describe the technical basis for their naming their approach as proper or correct. – Mar 11 '18 at 23:45

Remove white space between div blocks

5 Answers5