Where is this space between divs coming from?

Question

I'm trying to create a C shape with 7 blocks, so I set display inline-block for the top 3 and the bottom 3, where is the margin coming from between the middle block and the top block? And whats the best way to get rid of it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vanillaJavascript</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="topRow box"></div>
    <div class="topRow box"></div>
    <div class="topRow box"></div>
    <div class="box"></div>
    <div class="bottomRow box"></div>
    <div class="bottomRow box"></div>
    <div class="bottomRow box"></div>
  </div>
</body>
</html>

CSS

.box {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

.topRow {
  display: inline-block;
}

.bottomRow {
  display: inline-block;
}

Since they're `inline`, the space appearing between them is the whitespace between the elements in the markup – the line break and indentation. [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Jonathan Lonowski, Dec 18 '15 at 02:25

score 0 · Answer 1 · answered Dec 18 '15 at 02:22

0

Adding font-size: 0; to the parent container did the trick by getting rid of all the margins, but I'm still interested in why the space between the top and middle block is greater than the bottom and middle originally.

answered Dec 18 '15 at 02:22

WinchenzoMagnifico

2,265
3
17
19

A baseline alignment story, i think (so my vertical-align: top) – jmbarbier Dec 18 '15 at 02:25

score 0 · Answer 2 · answered Dec 18 '15 at 02:24

A part is from the spaces between your divs, the other one is from block alignment. You can achieve your C shape with only div boxes, but without spaces

<div class="container"><div class="box"></div><div class="box"></div><div class="box"></div><br/><div class="box"></div><br/><div class="box"></div><div class="box"></div><div class="box"></div></div>

and stylesheet

.box {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  line-height: 50px;
  vertical-align: top;
}

See this jsfiddle

Where is this space between divs coming from?

2 Answers2