How to calculate the width and height of an element?

Question

My understanding

Element width = (left border width + left padding + content width + right space bar + right edge width)

Element height = (upper border height + upper base height + content height + lower border height + lower border height)

Below is a chart for the same.

element width = (10 + 10 + 140 + 10 + 10) = 180

element height = (10 + 10 + 150 + 10 + 10) = 190

margin not included in the size of the element.

content and padding are included only in the click area.

Is the above formula correct when calculating the width and height an html element?

Answer 1

The way to compute CSS height and width not as simple and straightforward as it might seem.

The most direct answer to your question ...

How to calculate the width and height of an element?

...: It depends on the type of window used.

According to the CSS Visual Formatting Model :

10.3 Calculation of width and margins

The values ​​of the element width , margin-left , margin-right , left and right properties used for layout depend on the type of field and on each other ... The following situations should be distinguished:

• built-in, non-replaceable elements
• built-in replaced elements
• block level, irreplaceable elements in the normal flow
• block level, replaced elements in normal flow
• floating, non-replaceable elements
• floating, replaced elements
• absolutely positioned, not replaced elements
• absolutely positioned, replaced elements
• inline-block , non-replaceable elements in the normal flow
• inline-block , replaced elements in a normal flow

---

10.6 Calculation of heights and fields

To calculate the values ​​of top , margin-top , height , margin-bottom and bottom it is necessary to distinguish between different types of boxes:

same list as above

---

I really hoped to create a simple reference here by specifying variables that make up the width and height for at least a few types of boxes. So I started at the block level and found that calculating the width in general was pretty simple:

containing the width of the block = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right

However, when I got to the height, I found this:

10.6.3 Unsubstituted block level elements in the normal flow when overflow calculates visible

This section also applies to unoccupied elements at the block level in a normal stream, when overflow not evaluated to visible , but has been redistributed into the viewport.

If margin-top or margin-bottom are auto , their usable value is 0. If height auto , the height depends on whether the element has any child elements of the block level and whether it has indents or borders:

Element height is the distance from the top of the content to first apply the following:

• bottom edge of the last row window, if the field sets the built-in formatting context with one or more lines
• the lower edge of the lower (possibly folded) edge of its last daughter stream, if the lower field of the child is not destroyed with the lower limit of the element
• the lower edge of the border of the last in the flow of the child, the upper field of which is not compressed with the lower field of the element
• zero otherwise

Only children in the normal flow are taken into account (i.e., floating boxes and absolutely positioned fields are ignored, and relatively positioned boxes are considered without their displacement). Note that the child box may be an anonymous block block.

There are many factors involved in calculating heights.

---

TL DR

For an accurate and specific reading of the calculations used to determine the width or height of an HTML element, refer to the CSS Visual Formatting Model.To find out the exact height or width of an element, refer to the calculated values ​​tab in the developer tools.

Answer 2

It looks like you are describing the offsetWidth and offsetHeight element that returns the "width and height of the layout" of the element, i.e. final width after all calculations.

MDN defines offsetWidth as follows:

The read-only property HTMLElement.offsetWidth returns the width of the item’s layout. Typically, an offsetWidth element is a dimension that includes the borders of the elements, the horizontal filling of the element, the vertical scroll bar of the element (if present, if rendered), and the width of the CSS element.

So, to answer your question, the final width of an element’s layout is usually the sum of the element’s borders, horizontal fill, vertical scrollbar width and content width.

The final layout height ( offsetHeight ) will be similar.

Answer 3

The width width property indicates the width of the content area of ​​the element. The content area is inside the indents, borders, and margins of the element.

https://developer.mozilla.org/en-US/docs/Web/CSS/width

This page explains the window model in more detail: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model