How to get to the bottom where the width / height of the element

Question

I see this all the time while viewing my HTML in the Firefox DOM inspector.

The actual width of the element (1170px in this case) does not match the presumably selected rule (750 pixels). I realized that this could be caused by the max-width rule, but in this case there is no max-width . I assume that there is some kind of media query or some other strange rule. Is there a way using Firefox or Chrome or any dev console to get a summary of all the rules that affect the width / height of an element in one place?

Answer 1

A variety of factors can affect the width of an element, and the best way to see what exactly contributes to this 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 size. The center box indicates the base size of the item. In almost all cases, if you set the width rule to your CSS, you should see the same number here; If you do not, you should start checking the children of this element to see if the children are wider than the number you specified for your width property, since children expanding their parent are a fairly common problem / unexpected result.

If you DO see the same number here as the one indicated, then the large width comes from the padding / margin / border element of the element, so you should start checking your style rules to see what you set for these properties and where.

Also, keep in mind that depending on which box-sizing method you use, the total width of the element will be calculated according to these properties in different ways .. for example, if you set box-sizing: border-box; , and you apply these style rules:

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

You will see a chart in the form of a chart as follows:

Note that the base width number is no longer 500 , as the padding and border rules now contribute to the width. Therefore, when you specify the width, this will be the total width of all these properties, and your base width will only be the remainder not consumed by the padding or border properties.

I hope this helps, let me know if you would like any further clarification on anything.