计算保证金＆amp;流体/响应布局中的填充高度

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行文本的垂直高度的印刷单元。有关更多信息，请参阅Jon Tangerine的文章：

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

此外，Jon还提供了一个px到em转换表： http://jontangerine.com/silo/css/pixels-to-ems/

虽然通常使用em来表示行高和边距，但你也可以使用它们来代替像素的任何属性。