1

I'm trying to find where the white space below my blocks container is coming from. I can fix it by adding a negative margin-bottom, but I'm wondering where it is coming from in the first place. I want it to be on the very bottom border on the container div.

JSFiddle: https://jsfiddle.net/sv7eqoff/

HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Positioning</title>
    <link rel="stylesheet" href="positioning.css">
</head>
<body>
    <nav></nav>
    <div id="container">
        <div id="topbar"></div>
        <div id="blocks">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    <footer></footer>
</body>
</html>

CSS: 

body {
    margin: 0px 0px;
}
nav {
    height: 100px;
    background-color: blue;
    width: 100%;
}

#container {
    border: 2px solid black;
    width: 90%;
    margin: 40px auto;
}

#topbar {
    width: 100%;
    height: 200px;
    background-color: lightgray;
}

#blocks div {
    width: 200px;
    background-color: lightgray;
    height: 200px;
    display: inline-block;
    margin-top: 5px;
}

footer {
    height: 100px;
    background-color: blue;
    width: 100%;
}
Johannes
  • 64,305
  • 18
  • 73
  • 130
Chad Plourde
  • 73
  • 5
  • https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image you will get more explanation here also – Temani Afif Feb 05 '18 at 00:42

1 Answers1

4

It's because those DIVs are inline-block; elements, which are aligned at the baseline (like text), meaning that some whitespace below that baseline is reserved for those parts of the letters which go under the line (like in letters g, j, p etc.).

You can avoid that by using vertical-align: top on inline-block elements.

Johannes
  • 64,305
  • 18
  • 73
  • 130