Why does font-size move my parent div?

Question

I was attempting to style divs with display: inline-block;, but there was space between my divs so I changed everything to font-size: 0px; and it removed the space. Now when I try to write in the divs, it moves the parent around. Is there a way to not use position to style the divs, but keep them in place when I add a child element with text?

<!DOCTYPE html>
<html>
  <head>
    <title>Bummer</title>
    <style>
      html, body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        font-size: 0px;
      }
      #one {
        display: inline-block;
        height: 50%;
        width: 70%;
        background-color: red;
      }
      #ySpan {
        display: inline-block;
        font-size: 12px;
      }
      #two {
        display: inline-block;
        height: 50%;
        width: 30%;
        background-color: blue;
      }
      #three {
        display: inline-block;
        height: 50%;
        width: 60%;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div id="one">
      <span id="span">Text</span>
    </div>
    <div id="two"></div>
    <div id="three"></div>
  </body>
</html>

If you only add text to some elements, they will be aligned weirdly because of the default `vertical-align: baseline`, if that's what you meant with "moves the parent around". Then this is a duplicate of [CSS Inline-Block Elements Not Lining Up Properly](http://stackoverflow.com/q/19366401/1529630) — Oriol, Feb 20 '16 at 16:23
Instead of `font-size: 0;` you can use HTML comments to remove the whitespace between `
`s and use `vertical-align: top;` to align the `
` tops. JS bin [here](http://jsbin.com/coqiqexago/edit?html,output#H:L35). — Arman Ozak, Feb 20 '16 at 16:39

score 1 · Answer 1 · answered Feb 20 '16 at 16:22

Maybe I don't understand what you're trying to do but is this what you were trying to do?

<!DOCTYPE html>
<html>
    <head>
        <title>Bummer</title>
        <style>
            html, body {
                height: 100%;
                margin: 0px;
                padding: 0px;
                font-size: 15px;
            }
            #one, #two, #three {
              float: left;
            }
            #one {
                height: 50%;
                width: 70%;
                background-color: red;
            }
            #ySpan {
                display: inline-block;
                font-size: 12px;
            }
            #two {
                height: 50%;
                width: 30%;
                background-color: blue;
            }
            #three {
                height: 50%;
                width: 60%;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div id="one">
            <span id="span">Text</span>
        </div>
        <div id="two">werwer</div>
        <div id="three">dfg dfgdfgdfgdfg</div>
    </body>
</html>

Rogier Spieker · Accepted Answer · 2016-02-20T16:45:19.577

If I were not to look at what you are trying to achieve, the answer to your question would be to add a font-size > 0 to everything but the body.

Demo fiddle

Though if I were judging your entire approach, I'd strongly advise against slapping font-size: 0px to the body (or any other element) and look at better solutions, like float: left

As demonstrated here

Or, if the browser requirements let you, catch up on using flex layout

Why does font-size move my parent div?

2 Answers2