为什么 font-size 会移动我的父 div？

Question

我试图用 display: inline-block; 设置 div 的样式，但我的 div 之间有 space，所以我将所有内容都更改为 font-size: 0px; 并删除了 space。现在，当我尝试在 div 中写入时，它会四处移动父对象。有没有办法不使用 position 来设置 div 的样式，而是在我添加带有文本的子元素时将它们保持在原位？

<!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>

Answer 1

也许我不明白你想做什么，但这就是你想做的吗？

<!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>

Answer 2

如果我不看你想要达到的目标，你的问题的答案是添加 font-size > 0 除了 body.[=16= 之外的所有内容]

Demo fiddle

尽管如果我要评判你的整个方法，我强烈建议不要将 font-size: 0px 添加到 body（或任何其他元素）并寻找更好的解决方案，例如 float: left

As demonstrated here

或者，如果 browser requirements let you, catch up on using flex layout

为什么 font-size 会移动我的父 div？

Why does font-size move my parent div?

html

css

font-size