为什么不填充任何效果

这是一个CSS-noob问题，但我不明白：为什么不为外层div下面的代码显示任何填充？为什么不填充任何效果

<html> 
    <style> 
     div { 
      border: 1px solid red; 
      padding:10em 30em 10em 30em; 
      font-size:0px; 
     } 
     a { 
     font-size:1rem; 
     } 
    </style> 
    <body> 

     <div> 
      <a href="#">hello</a> 
     </div> 

    </body> 
</html>

如果您删除font-size属性，您将看到填充。但为什么字体大小影响填充？

来源

2014-09-05 shaft

我怀疑那是因为你指定0作为字号开始，然后REM的孩子，这是我没有想到会与字体0 ... – 13ruce1337 2014-09-05 23:57:49

已设置在em单元填充这是基于它被施加在元件的基本字体大小计算的，已设置的字体大小0px，所以对于em单元所计算出的输出为0（比方说10em x 0（px）），所以填充大小为0。

可以使用rem而不是em。 rem基于文档的root或HTML标签的字体大小。所以，如果你需要使用em但在元素上强制字体大小是不妥当的，设置在HTML标签根字号每当需要使用rem，而不是em。

来源

2014-09-05 23:58:31 Arbel

感谢，帮助了很多的工作。我正在处理外部框架，确实将字体大小设置为0，所以我被设计困住了。我所做的一切都没有影响，但是这澄清了一切。将填充设置为px有帮助。非常有帮助的答案，至少对我来说。 – shaft 2014-09-06 00:02:16

不客气！很高兴为您提供帮助。 – Arbel 2014-09-06 00:03:21

我试图切换到rem单位，在这种情况下，它看起来尊重填充。你什么时候会推荐使用rem而不是em？ – shaft 2014-09-06 00:07:41

“的em和ex单位取决于字体和可以是用于文档中的每个元素不同，EM是简单的字体大小”。

源：W3.org

所以... 0字体大小是当em用于填充0填充。

来源

2014-09-05 23:59:25 MikeSmithDev

8K时我很惊讶你会参考[W3]（http://www.w3fools.com/） – 13ruce1337 2014-09-06 00:01:20

@ 13ruce1337我很惊讶你感到吃惊。也许你正在考虑w3schools ...而不是w3.org。 – MikeSmithDev 2014-09-06 00:01:54

我喝了几杯。你是对的。我现在要走了：D – 13ruce1337 2014-09-06 00:02:25

为什么不填充任何效果

回答

相关问题