CODEWITHSUNDEEP
htmlcssfont-size
user18984
user18984

Reputation: 57

Why font-size property used on div affects divs width and height?

I have a fixed width and height div element which width/heigth changes when font-size property applied to it, Why?

I thought font-size affects only fonts size but not the container where it sits.

Upvotes: 2

Views: 2763

Answers (2)

major sam
major sam

Reputation: 580

It's probably because of your display properties.

display:table and display:inline both will adapt to your content's size even if you set a fixed width and height.

Try display:flex or display:block on your div and adjust the overflow settings to your will (if you want the overflowed content to show or not) and you should be good.

Upvotes: 0

Pedro Moreira
Pedro Moreira

Reputation: 965

The width and height properties set the desired properties for an element, which means that the element may update it's size to fit the content.

If you wish to be restrict about sizing, you can use the overflow property to update how it handles oversized content.

Examples: overflow: hidden: everything outside of the width and height won't be displayed overflow: scroll: the element has a scroll to show what's beyond width and height

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

It may also be worth checking out min-width, max-width, min-height and max-heightdepending on your case.

Upvotes: 1

Related Questions