Question

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

＆＃13;

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

＆＃13;

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

如果我不想看你想要达到的目标，那么你的问题的答案就是添加一个float: left＆gt; 0到身体以外的一切。

Demo fiddle

虽然如果我判断你的整个方法，我强烈建议不要将{{1}}打到身体（或任何其他元素）并查看更好的解决方案，例如{{1}}

As demonstrated here

或者，如果browser requirements let you，请使用flex layout

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

2 个答案: