“margin-top”不在css中工作

Question

在我的网页中，我希望在时钟和文本之间保持固定的距离。

这就是我希望它的样子：

当我减小标签的大小（网页宽度方式）时，会发生这种情况：

我希望在更大的屏幕上工作，但目前这适用于更大的屏幕。

在850px以下我使用的媒体查询工作正常，但是如果有更有效的方法，请告诉我。

main.html中

<Location />
    Allow from all
    SSLRenegBufferSize 20982000
    SSLVerifyClient require
    SSLVerifyDepth 5
</Location>

的main.css

    <div id = "main">
      <div id="clock"></div>
      <div id = "text">
      <div id = "greetDIV"><h1 id = "greet">Hello,''.</h1></div>

      <div id = "quoteDIV">
        <h2 id = "quote">quote</h2>
        <h2 id = "by" style="display:none;">- <a href = "" id = "byLink">by</a></h2>
      </div>
    </div>
  </div>

Answer 1

https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top

保证金 - 顶部（百分比）是根据容器的宽度计算的。因此，如果您在宽度方面调整屏幕大小，则边距会发生变化。

如果无法获得固定像素数量，请尝试根据视口高度（vh）或字体大小（em / rem）表示边距。