Question

假设我有两个div：第一个 - 矩形，填充黄色，第二个是文本“万维网”和字体大小46px。我需要在第一个div的底部和第二个div中的大写字母“W”的顶部之间设置距离39px。我在第一个div的CSS规则中设置了margin bottom 39px，并在屏幕上测量结果。我得到43px。我可以准确设定这个距离吗？（对于cource，我可以调整第一个div的边距并进行多次尝试来设置这个距离，但我需要另一种方式）。抱歉我的英文。

<!doctype html>

<html>
  <head>
    <title>
      test page
    </title>
    <style>
      html {
        line-height: 1;
      }
      #first {
        background-color: yellow;
        height: 200px;
        margin-bottom: 39px;
        width: 200px;  

      }

      #second {
        font-family: "Myriad Pro";
        font-size: 46px;
      }
    </style>
  </head>
  <body>
    <div id = "first">
     </div>
    <div id = "second">
      World wide web
    </div>
  </body>
</html>

screenshot

Answer 1

您可能需要在第二个div到{padding: 0}中设置文本的填充。任何未考虑的填充都会增加边距的外观。您是否尝试将background-color添加到#second，然后测量保证金？

Answer 2

我认为空间是字体的一部分。第二个div，font-size和line-height的大小均为46px。此外，它们之间的空格也是39px，您可以看到here。因此，如果您想将空间设置为39px，则可能需要搜索或制作没有额外空间的字体。

或

您可以在第二个div中设置line-height: 30px;，这会将其向上移动。但由于值取决于字体大小，因此每当您更改font-size时都必须更改它。也许使用em可以解决该问题

修改

em中的值为：

font-size: 2.87em; line-height: 0.655em;

现在将em中的font-size更改为任意值会将差距保持为39px，即margin-bottom的{{1}}

DEMO

我可以用文本精确设置div和div之间的距离吗？

2 个答案: