Getting to the bottom of where an element's width/height comes from [closed]

Question

I see this all the time when examining my HTML in the Firefox DOM inspector.

The element's actual width (1170px in this case) doesn't match the supposedly selected rule (750px). I figured out that this can be caused by a max-width rule, but in this case there is no max-width. I assume there's a media query or some other weird rule somewhere that's responsible for this. Is there any way, using the Firefox or Chrome or whatever dev console to get a summary of all the rules that affect an element's width/height in one place?

Answer 1

An element's width can be affected by a wide variety of factors, and the best way to see exactly what is contributing to it is to first look at the 'Box Model' tab in your inspector. You should see something like this:

Here, you can see a breakdown of each component of the element's size. The centre box indicates the base size of the element. In almost all cases, if you have set a width rule in your CSS, you should see that same number here; If you don't, you should start to inspect the children of the element, to see if any children are wider than the number you specified for your width property, as children expanding their parent is a fairly common issue/unexpected result.

If you DO see the same number here as specified, then the larger width is coming from the padding/margin/border of the element, so you should start checking through your style rules to see what you've set for those properties, and where.

Additionally, keep in mind that depending on which box-sizing method you are using, the total width of the element will be calculated from those properties differently.. for example, if you have set box-sizing: border-box;, and you apply these style rules:

div {
    width: 500px;
    padding: 100px;
    border: 5px solid black;
}

You will see a box model chart like this:

Note that the base width number is not 500 anymore, as the padding and border rules now contribute to the width. So when you specify a width, it will be the total width of all of those properties, and your base width will only be the remainder not consumed by the padding or border properties.

I hope that helps, let me know if you'd like any further clarification on anything.