By TobiasW


2014-06-18 13:09:42 8 Comments

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/

5 comments

@Dhaval Panchal 2014-06-18 13:17:30

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

@Huangism 2014-06-18 13:24:55

@DhavalPanchal I don't agree with 1 or 2, as 3 is the proper way, but they all work

@superUntitled 2014-06-18 13:27:33

@DhavalPanchal I would have to disagree with Chris Coyier in this case. Option number two is a maintenance nightmare.

@user420479 2018-03-11 23:45:36

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.

@cohenadair 2014-06-18 13:14:17

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.

@superUntitled 2014-06-18 13:23:09

I do not know why this was down-voted, it seems to be a fine way to do this.

@TobiasW 2014-06-18 13:25:47

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.

@Alex W 2014-06-18 13:27:57

I don't think using float for the layout is necessary, or beneficial in any way, in this case.

@JRulle 2014-06-18 13:12:39

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>

@Huangism 2014-06-18 13:12:18

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>

@TobiasW 2014-06-18 13:13:52

Thanks but I like the css the most, so I can just keep my HTML formating

@Huangism 2014-06-18 13:19:25

@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

@webkit 2014-06-18 13:11:12

use:

 .accordion {font-size:0px; }

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

@TobiasW 2014-06-18 13:12:20

Well that was easy... Thanks!

@Huangism 2014-06-18 13:12:42

This is more or less a hack even though I thought this is the correct way to go

@webkit 2014-06-18 13:12:49

sure.. just remember to give font-size to any inner element with text in it ;)

@webkit 2014-06-18 13:14:27

@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.

@Huangism 2014-06-18 13:17:03

@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.

@webkit 2014-06-18 13:21:41

@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

@Huangism 2014-06-18 13:23:27

@webkit I believe this is more about semantics than changing elements from inline or block to inline-block

@Alex W 2014-06-18 13:35:21

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.

@webkit 2014-06-18 13:48:15

@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 ;]

Related Questions

Sponsored Content

103 Answered Questions

[SOLVED] How to horizontally center a <div>

39 Answered Questions

[SOLVED] How do I remove the space between inline-block elements?

  • 2011-02-22 12:41:14
  • Šime Vidas
  • 256804 View
  • 1016 Score
  • 39 Answer
  • Tags:   html css

32 Answered Questions

[SOLVED] How to make a div 100% height of the browser window

  • 2009-10-15 21:18:43
  • mike
  • 1874154 View
  • 2027 Score
  • 32 Answer
  • Tags:   html css height

38 Answered Questions

[SOLVED] How can I make a div not larger than its contents?

  • 2009-01-16 16:03:07
  • George Snider
  • 1351338 View
  • 1972 Score
  • 38 Answer
  • Tags:   html css width

31 Answered Questions

[SOLVED] How do I auto-resize an image to fit a 'div' container?

23 Answered Questions

[SOLVED] Maintain the aspect ratio of a div with CSS

13 Answered Questions

[SOLVED] What's the difference between SCSS and Sass?

  • 2011-04-13 19:23:09
  • bruno077
  • 746058 View
  • 1768 Score
  • 13 Answer
  • Tags:   css sass

16 Answered Questions

[SOLVED] Click through div to underlying elements

  • 2010-09-09 20:42:54
  • Ryan
  • 632277 View
  • 1510 Score
  • 16 Answer
  • Tags:   css

31 Answered Questions

[SOLVED] Make a div fill the height of the remaining screen space

  • 2008-09-18 05:06:17
  • Vincent McNabb
  • 918978 View
  • 1756 Score
  • 31 Answer
  • Tags:   html css html-table

25 Answered Questions

[SOLVED] Space between two rows in a table?

  • 2008-12-08 21:49:59
  • Marin
  • 1108039 View
  • 736 Score
  • 25 Answer
  • Tags:   html css

Sponsored Content