我能正確設置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之間的距離嗎？

回答

相關問題