How to compute width & height of an element?

Question

My understanding is,

Width of an element = (left border width + left padding width + content width + right padding width + right border width)

Height of an element = (top border height + top padding height + content height + bottom padding height + bottom border height)

Below is the diagram for the same.

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

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

margin is not included in the size of an element.

content & padding are only included in the click region.

Is the above formula correct on computing width and height of an html element?

Answer 1

It sounds like what you are describing is the offsetWidth and offsetHeight of an element, which returns the "layout width and height" of the element, i.e. the final width after all calculations.

MDN defines offsetWidth the following way:

The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.

So to answer your question, the final layout width of an element is typically the sum of the element's borders, horizontal padding, vertical scrollbar width, and content width.

The final layout height (offsetHeight) would be similar.

Answer 2

The way CSS calculates height and width is not as simple and straightforward as it may seem.

The most direct answer to your question...

How to compute width & height of an element?

...is: It depends on the type of box being used.

According to the CSS Visual Formatting Model:

10.3 Calculating widths and margins

The values of an element's width, margin-left, margin-right, left and right properties as used for layout depend on the type of box generated and on each other... The following situations need to be distinguished:

1. inline, non-replaced elements
2. inline, replaced elements
3. block-level, non-replaced elements in normal flow
4. block-level, replaced elements in normal flow
5. floating, non-replaced elements
6. floating, replaced elements
7. absolutely positioned, non-replaced elements
8. absolutely positioned, replaced elements
9. inline-block, non-replaced elements in normal flow
10. inline-block, replaced elements in normal flow

---

10.6 Calculating heights and margins

For calculating the values of top, margin-top, height, margin-bottom, and bottom a distinction must be made between various kinds of boxes:

same list as above

---

I was actually hoping to create a simple reference guide here by listing the variables that make up the width and height for at least a few of the box types. So I started with block-level and found that calculating the width, in general terms, was easy enough:

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

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

10.6.3 Block-level non-replaced elements in normal flow when overflow computes to visible

This section also applies to block-level non-replaced elements in normal flow when overflow does not compute to visible but has been propagated to the viewport.

If margin-top, or margin-bottom are auto, their used value is 0. If height is auto, the height depends on whether the element has any block-level children and whether it has padding or borders:

The element's height is the distance from its top content edge to the first applicable of the following:

1. the bottom edge of the last line box, if the box establishes a inline formatting context with one or more lines
2. the bottom edge of the bottom (possibly collapsed) margin of its last in-flow child, if the child's bottom margin does not collapse with the element's bottom margin
3. the bottom border edge of the last in-flow child whose top margin doesn't collapse with the element's bottom margin
4. zero, otherwise

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

There are many factors to consider when calculating height.

---

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 learn the exact height or width of an element refer to the computed values tab in developer tools.