2

假设，我有两个 div：第一个 - 矩形，填充黄色，第二个带有文本“万维网”和字体大小 46px。我需要在第一个 div 的底部和第二个 div 中的大写字母“W”的顶部之间设置 39px 的距离。我在第一个 div 的 CSS 规则中设置边距底部 39px，并在屏幕上测量结果。我得到了 43 像素。我可以准确设置这个距离吗？（当然，我可以调整第一个 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>

截屏

4

2 回答 2

2

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

于 2013-08-01T19:13:30.307 回答
1

我认为空间是字体的一部分。大小第二div，font-size都是line-height。46px此外，它们之间的空间也39px如您在此处看到的那样。因此，如果您想将空间设置为 39 像素，您可能必须搜索或制作没有多余空间的字体。

或者

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

编辑

中的值em将是：

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

现在将font-sizeem 更改为任何值将保持差距，39px即margin-bottomdiv#first

演示

于 2013-08-01T19:32:08.150 回答