display inline-block with 50% doesn't line up?

Question

i just want to create a simple horizontal list with some divs. Therefor i did this:

Now as you can see in the result the divs are not next to each other. But i used width of 50%. So what is wrong?

use `float:left;` instead of `display:inline-block;` or do [these tricks](https://css-tricks.com/fighting-the-space-between-inline-block-elements/) — Alex, Jun 11 '16 at 13:38
@Alex float is good way but in question op asked issue with display:inline-block so better to stick with tricks given by you like margin-right:-4px will be great. — Leo the lion, Jun 11 '16 at 13:43

score 0 · Accepted Answer · answered Jun 11 '16 at 13:36

Elements with inline-block have a little margin on the right side. You can see this with this Code:

div {
  background:black;
  display:inline-block;
  width:20%;
}

<div>Test #1</div>
<div>Test #2</div>

To solve your problem, you can use the following:

body, html {
  padding:0;
  margin:0;
}
.list{
  width:100%;
  height: 100%;
  background: black;
}
.list div{
  float:left;
  display: block;
  width: 50%;
  height: 100px;
  background: red
}

<div class="list">
  <div style="background: red">1</div>
  <div style="background: orange">2</div>
  <div style="background: yellow">3</div>
  <div style="background: lightyellow">4</div>
</div>

thanks. Didn't know that. Floats are a good alternative :) – bbuddyOmma Jun 11 '16 at 13:38 — bbuddyOmma, Jun 11 '16 at 13:38

score 0 · Answer 2 · answered Jun 11 '16 at 13:39

actually, this is a problem of inline-block so if you want to use it, you can't have whitespace between elements ;)

check your fiddle: https://jsfiddle.net/ks0t1xoy/13/

after removing all whitespaces from your .list all elements align nicely, without touching your CSS

display inline-block with 50% doesn't line up?

2 Answers2