我能正确设置div和div之间的距离吗？

假设，我有两个div：第一个 - 矩形，填充黄色，第二个文本为“万维网”，字体大小为46px。我需要在第一个div的底部和第二个div中的大写字母“W”的顶部之间设置距离39px。我在第一个div的CSS规则中设置页边距39px，并在屏幕上测量结果。我有43px。我能准确设定这个距离吗？（来源，我可以调整第一个div的边距，并尝试设置这个距离，但我需要另一种方式）。对不起我的英语不好。我能正确设置div和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

来源

2013-08-01 igor_rb

检查正在应用的默认浏览器样式。使用像[normalize.css]（http://necolas.github.io/normalize.css/）这样的东西，有时会以某种方式或某种方式表现出某种猜测。等等 – feitla

我认为，这是因为字体大小大于大写字母的高度.... –

我包含normalize.css并得到了相同的结果：43px。 –

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

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

编辑

在em值将是：

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

现在改变EM font-size任何值的差距保持到39px，即margin-bottomdiv#first

DEMO

来源

2013-08-01 19:32:08 Sourabh

我可以计算这个空间的大小吗？可能是我需要解决任何方程来找到大小？或者这是不可能的？ –

哪个空间？字体中的额外空间还是2个div之间的空格？ 'div's之间的空格与'margin-bottom'相同。不幸的是，我不知道如何在字体中获得额外的空间。它取决于'font-size'，所以它不是静态的，而是在字体大小发生变化时更改 – Sourabh

字体中的额外空间。字体族，字体大小和字体的额外空间之间有什么关系？ –

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

来源

2013-08-01 19:13:30

我看不到任何填充第二格 – Sourabh

我设置了背景色，并在'W'字母的顶部和#second的边框之间获得了大约4px的差异。填充0没有帮助。这是因为字体大小大于大写字母。但是，如何在不设置背景颜色，调整边距等的情况下计算这种差异？ –

在这种情况下，您可以设置负填充，以便包含div（使用'padding：-4px'）实际上停在大写字母的顶部。 –

我能正确设置div和div之间的距离吗？

回答

相关问题