为什么div上使用的font-size属性会影响div的宽度和高度？

Question

我有一个固定的宽度和高度div元素，当应用font-size属性时，width / heigth会发生变化，为什么？

我认为font-size只影响字体大小，但不影响它所在的​​容器。

Answer 1

width和height属性设置元素的所需属性，这意味着元素可以更新其大小以适合内容。

如果您希望限制调整大小，可以使用overflow属性更新处理超大内容的方式。

实施例： overflow: hidden：width和height之外的所有内容都不会显示 overflow: scroll：该元素有一个滚动条，用于显示超出width和height

的内容

https://developer.mozilla.org/en/docs/Web/CSS/overflow

根据您的情况，也可能需要查看min-width，max-width，min-height和max-height。

Answer 2

这可能是因为您的display属性。

即使您设置了固定的宽度和高度，

display:table和display:inline也会适应您的内容尺寸。

在您的div上尝试display:flex或display:block并根据您的意愿调整overflow设置（如果您希望显示或不显示溢出的内容），那么您应该做得很好。