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，您会发现它只更改了 font-sizes 而不是边距或填充。

任何帮助将不胜感激，谢谢!

Answer 1

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

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

62% font size

63% font size

希望这对事情有所启发!