我了解如何在流畅/响应式布局中计算 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%;}
如何转换 padding-top？通过 16px（正文字体大小）跳水？当我这样做时，结果超过 10px 有效。
【问题讨论】：
标签： css grid responsive-design fluid-layout
如果您希望边距和内边距响应字体大小，最好为您的单位使用 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 用于行高和边距等内容，但您也可以将它们用于几乎任何属性来代替像素。
【讨论】：
em 用于line-height 并不好，因为它会导致间距不均匀——这是真的吗？在这方面One author 将em 比作px；和this author also suggests 改为使用无单位的line-height...我不知所措。我认为em 是终极答案。