remove space between divs

Question

Question: Why is there a space between the two div tags?

Screenshot:

//HTML

<div class='row'>
    <div class="item">
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
    </div>
    <div class="item">
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
    </div>
</div>

//CSS

.row{
    background-color: red; 

    margin: 2em 0;
    display: block;
    text-align: center;
    white-space: nowrap;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.6) inset;
    box-shadow: 0 1px 5px rgba(0,0,0,.6) inset;  
}
.item{
    background-color: silver;

    width: 50%;
    white-space: normal;
    display: inline-block;
}
.sub-item{
    background-color: royalblue;

    margin: .5em;
    width: 100px;
    height: 100px;
    text-align: center;
    display: inline-block;
}

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) — Rob, Oct 31 '15 at 17:58
@Rob yea I've seen the `font-size=0` before, but then it disables my margins on the children `sub-items` in this case. — Jordan Davis, Oct 31 '15 at 18:03
Then don't do that. This question is asked all the time so search for those. — Rob, Oct 31 '15 at 18:05
@JordanDavis your margin is using `em`, so if you simple set the `font-size: 0` they will disappear aswell. However you can use `px` for your margins or simple restore the `font-size` in the inner element. — Romulo, Oct 31 '15 at 18:08
@Romulo ahhhh damn I don't know how the hell I didn't see that! Thank you thank you! — Jordan Davis, Oct 31 '15 at 18:12
@Romulo post that answer I'll mark it, correct. thanks again! — Jordan Davis, Oct 31 '15 at 18:16
@JordanDavis my answer already cover that. the margins are working fine :) — Romulo, Oct 31 '15 at 18:17

Romulo · Accepted Answer · 2015-10-31T18:20:47.240

Why is there a space between the two div tags?

You can read more about it in Fighting the Space Between Inline Block Elements

To remove the undesired blank space, set font-size: 0 in the .row element, and then restore the font-size in the .item.

.row {
    font-size: 0;
}

.item {
    font-size: 12px;
}

Since your margins are using the the em unit, if you simple set the font-size: 0 in the wrapper element, your margins will disappear aswell.

To keep your margins, it's important to restore the font-size in the inner element or set the margins using another unit that is not based on the font-size, like px.

Following is an example:

.row {
  background-color: red;
  margin: 2em 0;
  display: block;
  text-align: center;
  white-space: nowrap;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .6) inset;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .6) inset;
  font-size: 0;
}
.item {
  font-size: 12px;
  background-color: silver;
  width: 50%;
  white-space: normal;
  display: inline-block;
}
.sub-item {
  background-color: royalblue;
  margin: .5em;
  width: 100px;
  height: 100px;
  text-align: center;
  display: inline-block;
}

<div class='row'>
  <div class="item">
    <div class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
  </div>
  <div class="item">
    <div class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
    <div class="sub-item"></div>
  </div>
</div>

score 0 · Answer 2 · answered Oct 31 '15 at 18:17

There are multiple ways to remove space between elements... one way is to simply do have tag literally stick together such as </div><div>

<div class='row'>
    <div class="item">
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
    </div
    ><div class="item"> <-- an end tag stick with another open tag will solve your problem
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
        <div class="sub-item"></div>
    </div>
</div>

For more information on other solutions, you can also look at here CSS-Trick

remove space between divs

2 Answers2