計算流體/響應佈局中的邊距和填充高度

Question

我瞭解如何計算流體/響應佈局中的margin-left/padding-left和margin-right/padding-right。但是，margin-top/padding-top和margin-bottom/padding-bottom？

例如，我有這樣的代碼：

header h1{padding:10px 0 0 15px;} 

當我將它轉換爲流動佈局得到這樣的：

header h1{padding:10px 0 0 8.823529411765%;} 

如何轉換填充頂？通過潛水16px（身體字體大小）？當我這樣做時，結果是超過10px有效。

Answer 1

如果您希望邊距和填充值對字體大小做出響應，最好爲您的單元使用em。雖然由於繼承而變得複雜，但em是代表1行文本垂直高度的印刷單位。欲瞭解更多信息，請參閱喬恩蜜桔的文章：

http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

此外，喬恩提供的PX到EM轉換表： http://jontangerine.com/silo/css/pixels-to-ems/

雖然這是通常使用EM是對於像行高和利潤，你也可以使用它們來代替像素的任何屬性。