为什么fontsize在显示的情况下有所不同：块和显示：内联块？

Question

你能不能告诉我为什么在显示的情况下fontsize会有所不同：块和显示：内联块？我正在检查mobile view 链接 https://output.jsbin.com/lajofihonu

在上面的链接中，有a代码＆＃39; show popup＆＃39; 。当我使用display:block时，字体大小会增加并且对用户可见，当我使用display:inline-block时 它的字体大小减少了无法看到。

这是我的代码

https://jsbin.com/lajofihonu/edit?html,css

问题在于此css

.show_pop {
            width: 80%;
            margin: 0 auto;
            display: inline-block;
            border: black;
            color: #00aacd;
            font-size: 1em;
            text-align: center;
        }

downvoter请解释为什么会这样？

Answer 1

根据控制台，字体大小没有区别。两者都输出16px。

我认为display属性不是问题所在。可能是因为您使用的是em。 em与文档字体大小有关。

em和ex单位取决于字体，并且对于文档中的每个元素可能不同。 em只是字体大小。在具有2英寸字体的元素中，1em因此意味着2英寸。在em中表示大小（例如边距和填充）意味着它们与字体大小相关，并且如果用户具有大字体（例如，在大屏幕上）或小字体（例如，在手持设备上），则尺寸将按比例。

https://www.w3.org/Style/Examples/007/units.en.html

如果您想保持不变，请尝试将其更改为font-size: 16px。

编辑：https://jsfiddle.net/16e4cxg2/ 使用此JSFiddle，如果您将值更改为block并单击run，您将看到大小不会更改。

必须有其他东西导致它，例如具有不同字体大小的父元素？尝试删除font-size属性。它可能不需要。

编辑： 显示块未添加断开线。 https://www.w3schools.com/css/css_inline-block.asp

要解决此问题，请保留block而不是display-block。它搞乱了你不需要的布局。

将<p> </p>放在你的paragrpah周围。

并更改.show_pop

display: block;
border: black;
color: #00aacd;
font-size: 1em;
text-align: center;