html - 使用 rem 调整边距/填充大小

Question

我正在尝试更改根元素的字体大小，以更改整体字体大小、边距和填充。

问题是，当我更改 html 标签的 font-size 时，它会完美地更改字体，但边距和填充保持不变，就像 1rem = 10px

这是一支笔，可以说明我的意思:

http://codepen.io/Spittal/pen/xewqh/

-HTML

<div class='container'>
  <h1>Hello! REM!</h1>
  <p>Hello Paragraph REM!</p>
</div>

-CSS

html { 
    font-size: 61.5%;
}

.container {
  background-color: red;
  padding: 3rem;
  margin: 3rem;
}

h1 {
  font-size: 4rem;
}

p {
  font-size: 1.8rem;
}

如果您尝试更改 html 元素的 font-size，您会发现它仅更改字体大小，而不更改边距或填充。

如有任何帮助，我们将不胜感激，谢谢!

Answer 1

我查看了您的 codpen，发现边距和填充大小确实发生了变化。

看看 Chrome 页面检查器的这两个屏幕截图:

62% font size

63% font size

希望这能让事情有所启发!