计算流体/响应布局中的边距和填充高度

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是对于像行高和利润，你也可以使用它们来代替像素的任何属性。