為什么在div上使用font-size屬性會影響div的寬度和高度？

Question

我有一個固定的width和height div元素，當將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設置（如果您希望顯示或不顯示溢出的內容），您應該會感到滿意。