Extra space despite having no margin why?

Question

There is extra space between .domino elements why, how can I get rid of it?

.domino{
  letter-spacing: 0px;
  display: inline-block;
  background-color: #e0d0b0;
  height: 150px;
  width: 100px;
  border-radius: 10px;
  text-align: center;
  font-size: 400%;
  font-family:Arial Black;
  position: relative;
  color: rgba(230,0,0, 0.9);
  text-shadow: 
    -1px 1px rgba(255,255,255,0.75),
    1px -1px rgba(0,0,0,0.5),
    2px -2px rgba(0,0,0,0.5),
    3px -3px rgba(0,0,0,0.5);
}

.domino .heart{
  content: "❤";
  position: absolute;
  top: 50%;
  left: 0px;
  width: 100%;
  font-size: 60%;
}
.heart:after{
  position: absolute;
  content: "";
  height: 50px;
  width: 50px;
  border-radius: 50px;
  left: 27px;
  background: 
  -webkit-box-shadow: inset 2px -2px 2px 0px rgba(255,255,255,0.75), inset -2px 2px 2px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: inset 2px -2px 2px 0px rgba(255,255,255,0.75), inset -2px 2px 2px 0px rgba(0,0,0,0.5);
  box-shadow: inset 2px -2px 2px 0px rgba(255,255,255,0.75), inset -2px 2px 2px 0px rgba(0,0,0,0.5);
}
.heart:before{
  position: absolute;
  content: "";
  box-shadow: -1px 1px 1px 0px rgba(255,255,255,0.6), inset -2px 2px 1px 0px rgba(0,0,0,0.75);
  left: 45px;
  top: 23px;
  height: 10px;
  width: 10px;
  border-radius: 10px;

}
#rack{
  margin: 25% 10%
}
.wood {
  border-radius: 5px;
  position: relative;
  background-image: radial-gradient(#EFBF7F,#955724);
  -webkit-background-size: 100%;
  padding: 20px 20px 35px 35px;
  z-index: 0;
  max-width: 460px;
  box-shadow:
    -2px 4px rgb(100,50,25),
    -4px 6px rgb(100,50,25),
    -6px 8px rgb(100,50,25),
    -8px 10px rgb(100,50,25),
    -10px 12px rgb(100,50,25),
    -45px 25px 5px rgba(0,0,0,0.5);
}

/* Background from http://lea.verou.me/css3patterns/#upholstery */
body{
  background:
  radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
  radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
  radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
  radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
  radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
  radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
  radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
  radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
  linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
  linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
  background-color: #300; 
  background-size: 100px 100px;
}

.green{
  color: rgba(0,180,100, 0.9);
}

.orange{
  color: rgba(255,150,0, 0.9);
}

.black{
  color: rgba(0,0,0, 0.75);
}

<div id="rack">
  <div class="wood">
    <span class="domino green">
      <span class="num">4</span>
      <span class="heart">❤</span>
    </span>
    <span class="domino orange">
      <span class="num">2</span>
      <span class="heart">❤</span>
    </span>
     <span class="domino">
      <span class="num">0</span>
      <span class="heart">❤</span>
    </span>
    <span class="domino black">
      <span class="num">6</span>
      <span class="heart">❤</span>
    </span>
    <span class="domino">
      <span class="num">9</span>
      <span class="heart">❤</span>
    </span>
  </div>
</div>

http://codepen.io/eguneys/pen/qdzvgp

score 2 · Accepted Answer · 2015-08-22T08:16:27.607

This happen because you are using display: inline-block; that doesn't fully ignore the whitespaces in your html.

Workarounds for this are:

modify your code and use float: left instead
add font-size: 0 to the parent wrapper and reset again the font-size for child elems.
remove the whitespaces from html between the dominos divs

Working example using float: left (and a dummy clear div) - http://codepen.io/anon/pen/oXrVRd

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

It is because display: inline-block use float:left instead to resolve this.

Display: Inline block - What is that space?

edited May 23 '17 at 12:06

Community

1
1

answered Aug 22 '15 at 08:13

Masoom

743
1
5
15

score 0 · Answer 3 · answered Aug 22 '15 at 08:16

0

You can change display of domino class to table-cell and wood class display to table.

You can add a margin to domino class.

All pretty much depends of how you want to do it.

answered Aug 22 '15 at 08:16

calinaadi

1,466
1
13
22

rich_c · Answer 4 · 2015-08-22T09:10:15.883

I agree with everyone's part of their answers about changing the display:inline-block to float:left on the div element with class "domino".

In addition to this my suggestion would be to change the width on the parent div with class "wood" to auto but keep what I believe to be it's intended padding values. If you add float left to this element as well as to the child span elements with class "domino" you could achieve the desired effect. Please see suggested changes below and please correct me if i've misunderstood what you are trying to do.

.domino{
  letter-spacing: 0px;
  /* display: inline-block; Remove this */
  float:left; /* Add this */
  background-color: #e0d0b0;
  height: 150px;
  width: 100px;
  border-radius: 10px;
  text-align: center;
  font-size: 400%;
  font-family:Arial Black;
  position: relative;
  color: rgba(230,0,0, 0.9);
  text-shadow: 
    -1px 1px rgba(255,255,255,0.75),
    1px -1px rgba(0,0,0,0.5),
    2px -2px rgba(0,0,0,0.5),
    3px -3px rgba(0,0,0,0.5);
}

.wood {
  border-radius: 5px;
  float:left; /* Add this */
  position: relative;
  background-image: radial-gradient(#EFBF7F,#955724);
  -webkit-background-size: 100%;
  padding: 20px 35px 20px 35px; /* If you intend to have 20px on top and bottom and 35px on sides */
  z-index: 0;
  width: auto; /* Change width to auto */
  box-shadow:
    -2px 4px rgb(100,50,25),
    -4px 6px rgb(100,50,25),
    -6px 8px rgb(100,50,25),
    -8px 10px rgb(100,50,25),
    -10px 12px rgb(100,50,25),
    -45px 25px 5px rgba(0,0,0,0.5);
}

I wondered where that space is coming from, I removed `inline-block` and its fine now thanks. — eguneys, Aug 22 '15 at 09:19

score -1 · Answer 5 · answered Aug 22 '15 at 11:36

I played with your codepen and I achieved no gaps between the cards in two ways:

1) add

.domino { margin-left: -4px; }

2) change

.domino { display: inline-block; }

to

.domino { float: left; }

which causes .wood to collapse, so add

.wood { display: table; }

and wood inflates back to normal again

Extra space despite having no margin why?

5 Answers5