Does Element Width Include Padding

Does element width include padding?

• IE used to use the more-convenient-but-non-standard "border-box" box model. In this model, the width of an element includes the padding and borders. For example:
  
  #foo { width: 10em; padding: 2em; border: 1em; }
  
  would be 10em wide.

• In contrast, all standards-fearing browsers default to the "content-box" box model. In this model, the width of an element does not include padding or borders. For example:
  
  #foo { width: 10em; padding: 2em; border: 1em; }
  
  will actually be 16em wide: 10em + 2em padding for each side, + 1em border for each edge.

If you use a modern version of IE with valid markup, a good doctype, and appropriate headers it will adhere to the standard. Otherwise, you can force modern standards-compliant browsers to use "border-box" via:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

The first declaration is needed for Opera, the second is for Firefox, the third is for Webkit and Chrome.

Here's a simple test I made years ago for testing what box-sizing declaration your browser supports: http://phrogz.net/CSS/boxsizing.html

Note that Webkit (Safari and Chrome) do not support the padding-box box model via any declaration.

When does padding affect total width, and when doesn't it?

MDN - Box-sizing property

The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

By default, padding is not included in an element's width/height calculation. It's worth pointing out that the box-sizing property is set to content-box in this case.

MDN - content-box value

This is the default style as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin. Note: Padding, border & margin will be outside of the box e.g. IF .box {width: 350px}; THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} .box {width: 370px;}

If the box-sizing property is changed to border-box, the padding is included the element's width/height calculations, and so is the border.

MDN - border-box value

The width and height properties include the padding and border, but not the margin. This is the box model used by Internet Explorer when the document is in Quirks mode. Note: Padding & border will be inside of the box e.g. IF .box {width: 350px}; THEN you apply {border: 10px solid black;} RESULT {rendered in the browser} .box {width: 350px;}

Further reading:

• MDN box model

• MDN padding

How to make an element width: 100% minus padding?

box-sizing: border-box is a quick, easy way to fix it:

This will work in all modern browsers, and IE8+.

Here's a demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

The browser prefixed versions (-webkit-box-sizing, etc.) are not needed in modern browsers.

Padding adds to div width / height?

The content-box model states that padding and borders don't count in the width that you set for a box. So they add on to its width.

Modern browsers support CSS3's box-sizing: border-box to cause width to represent the total width of content, padding and borders (the default is, of course, content-box, triggering the above behavior).

Does getBoundingClientRect().width and height includes paddings and borders of element?

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>

*,*:before,*:after {  box-sizing: border-box;}body {  margin: 0}.testing-here {  padding: 2.5px;  font-size: 0}.panel-default {  box-sizing: border-box;  border-style: none;  position: relative;  width: 50%;  padding-bottom: 40%;  /* = width for a 1:1 aspect ratio */  overflow: hidden;  background-color: #446CB3;  border-radius: 0;  display: inline-block;  font-size: 16px;  border: 5px white solid}.panel-body {  color: white;  position: absolute;}

<div class="testing-here">  <div class="panel panel-default">    <div class="panel-body">      Basic panel example    </div>  </div>  <div class="panel panel-default">    <div class="panel-body">      Basic panel example    </div>  </div>  <div class="panel panel-default">    <div class="panel-body">      Basic panel example    </div>  </div>  <div class="panel panel-default">    <div class="panel-body">      Basic panel example    </div>  </div></div>

body {    background: #fc7;    margin: 0;}#x {/*200px + 2px border + 10px padding = 212px width plus margins */    box-sizing: content-box;    border: 1px solid black;    height: 200px;    margin: 2px;    padding: 5px;    width: 200px;    background: #7fc;}#y {/*200px = 200px width plus margins */    box-sizing: border-box;    border: 1px solid black;    height: 200px;    margin: 2px;    padding: 5px;    width: 200px;    background: #f6f;}#z {/*200px + 2px border = 202px width plus margins */    box-sizing: padding-box;    border: 1px solid black;    height: 200px;    margin: 2px;    padding: 5px;    width: 200px;    background: #cf9;}

<div id="x">content-box</div><div id="y">border-box</div><div id="z">padding-box</div>