鍍金池/ 問答/HTML/ em和px的換算，哪里出問題了？

em和px的換算，哪里出問題了？

前端新手，今天在練習(xí)css時，發(fā)現(xiàn)一個問題：
我把body的font-size設(shè)為10或者是62.5，這時設(shè)置20em，不就是200px的意思么，可在瀏覽器里不是這樣的，看代碼：

<body>
  <div>
  </div>
</body>
body {
    margin: 0;
    padding:0;
    font-size: 62.5%;
}

body {
    background-color: #caebff;
}

div {
    width: 20em;
    height: 20em;
    background-color: red;
}

結(jié)果在瀏覽器上出現(xiàn)的是240px的紅色正方形？不應(yīng)該是200px么？多的40px是從哪里來的？
望指教，謝謝。

@changli 告訴我chrome因?yàn)樽钚≈恢С?2px的中文，所以會有這樣的問題。我突然想起來，確實(shí)是的。那么，我在body里讓font-size:625%,是不是就能解決了呢？呃，看代碼：

<body>
  <div>
    <p>測試</p>
  </div>
</body>
body {
    font-size: 625%;
    margin: 0;
    padding: 0;
}

body {
    background-color: #caebff;
}

div {
    width: 0.3em;
    height: 0.3em;
    background-color: red;
    font-size: 0.2em;/*因?yàn)閎ody里是625%，所以字體太大，就調(diào)整了一下字體，但跟著div的寬和高都變了*/
}

本來是想實(shí)現(xiàn)寬高都是30px，但字體太大了，因?yàn)樯厦媸?25%，我就設(shè)置了一下字體，呃，字體是正常了，盒子的寬和高一下子就不對勁了。
像我上面代碼這樣的情況，應(yīng)該怎么解決??？

回答
編輯回答
厭遇

有的瀏覽器的默認(rèn)最少字體大小是12px；低于12px都以12px對待

2017年7月20日 07:22
編輯回答
喜歡你

盒子之類非字體的尺寸建議還是用rem吧，因?yàn)閑m單位依賴于父元素，用作盒子尺寸的話，那父元素上font-size就沒法用了，很不靈活。這點(diǎn)不如rem，直接在:root上掛個font-size就能跑，body上再重置下font-size就可以不受影響了。em還是建議專用于字體上會比較好。

2017年3月29日 20:21