CODEWITHSUNDEEP
htmlcss
temporary_user_name
temporary_user_name

Reputation: 37118

What factors affect the calculation of an element's width and height?

What I have is an element whose styling is broken: the width and height are quite wrong. The problem is that there is no width or height specified on this element: if you look at it in Chrome Dev Tools, you see those properties are greyed out, as seen below, because they're just being calculated by the browser based on other information.

enter image description here

And comparing diffs between commits, I can see no styling rules were changed on this element. Which means something around the element was changed: one of its many children, or a parent.

What I would like to know is how can you determine what elements or rules are affecting that calculation, so as to debug it?

I am hoping there is sort of a checklist, something like "Check width property on all child elements. If it is set, then ..., otherwise move on to look at possible JavaScript affecting ... "

Edit: The question can be rephrased as ""What factors do browsers check, in what order and with what priority, to determine an element's dimensions?"

Upvotes: 4

Views: 489

Answers (1)

Sander Moolin
Sander Moolin

Reputation: 448

See these specifications: https://www.w3.org/TR/CSS2/visudet.html#propdef-height

There are a few different types of height calculations, as outlined in section 10.6. Take a look at the subsections there to determine how the height of your element is being calculated.

(There's a warning of some of the sections on that page being updated by other specifications, but a quick check on the updates doesn't seem to include any changes for height.)

Upvotes: 2

Related Questions