getBoundingClientRect().width 和 height 是否包括元素的内边距和边框？

Question

getBoundingClientRect().width 和 height 属性，同时返回值包括元素的填充和边框吗？

Answer 1

By default it returns width+padding+border Why?.

Because it's relative to the box-sizing CSS property, Which can have two values:

1. content-box (default value)
2. border-box

---

content-box: includes only the content. Border, padding and margin are not included.

This means when you set a width, That width is set to the content only then you add the padding and border.

 console.log(document.querySelector('p').getBoundingClientRect().width)

 p { box-sizing: content-box; width: 300px; padding: 10px; border: 2px solid; }

 <p>The console should log 324px because the width is 300px<br> padding is 10px left 10px right <br> border is 2px left 2px right<br> sums up to 300+10+10+2+2 = 324</p>

---

border-box: includes content, padding and border. margin is not included.

This means padding and border will be calculated within the defined width.

 console.log(document.querySelector('p').getBoundingClientRect().width)

 p { box-sizing: border-box; width: 300px; padding: 10px; border: 2px solid; }

 <p>console should log 300px Because padding's width and border's width have been calculated wihtin the specified width in the CSS</p>

Note: Height is not affected, But the same rules are applied to it too.

Answer 2

TLDR;

It will always return dimensions of the border box (green box bellow), which contains the content area , padding area and border area , as defined in the CSS Box Model .

The width style

However, one must not conflate content width (a property of the element layout) and style width (a constraint on the element layout, width: xxx; rules) which are very distinct things. The box-sizing will only affect whether the style width constraint should include the border and padding , or not.

Demonstration by example

In this first snippet, we are using box-sizing: border-box rule so that style width == boder + padding + content width . The result of getBoundingClientRect().width is 140 , and it equals style width .

 var x = document.getElementById("x"); console.log('getBoundingClientRect().width =', x.getBoundingClientRect().width); console.log('getComputedStyle(x).width =', getComputedStyle(x).width);

 #x { border: 20px solid blue; padding: 10px; width: 140px; box-sizing: border-box; }

 <div id=x>Border Box</div>

In the second snippet, we are using box-sizing: content-box rule so that style width == content width . The result of getBoundingClientRect().width is still 140 because the sum of border + padding + content width has not changed , only style width has changed.

 var y = document.getElementById("y"); console.log('y.getBoundingClientRect().width =', y.getBoundingClientRect().width); console.log('getComputedStyle(y).width =', getComputedStyle(y).width);

 #y { border: 20px solid blue; padding: 10px; width: 80px; box-sizing: content-box; }

 <div id=y>Content Box</div>

References

• MDN | Introduction to the CSS box model
• CSSWG | CSS2 (Box Model)
• MDN | Element.getBoundingClientRect()