Box Model Example

by Chad Drummond

HTML

<div>20px + 200px + 20px</div>
<p>200px</p>

CSS

/* browser default is `box-sizing: content-box` */

div {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  background: red;
}

p {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  background: green;
}