box-sizing example

box-sizing property example

by Sanjay

HTML

<div class="example" data-property="box-sizing">
      <div>content-box</div>
      <div>border-box</div>
      <span>First div is "content-box", so padding and border are outside of width. Second div is "border-box", so padding and border are inside width.</span>
</div>

CSS

.example {
  float:left;
  margin: 10px 20px;
  width: 400px;
  background:#ccc;
  position:relative;
  padding:10px 15px;
}
.example:before {
  content:attr(data-property);
  display: block;
  font-weight:bold;
  font-style:italic;
  color:#008080;
}

div[data-property] > div {
  margin: 5px 0;
}

/**
 * box-sizing.
 */
div[data-property="box-sizing"] > div {
  width:250px;
  height:40px;
  padding:0 10px;
  border: 3px solid;
  background: red;
  box-sizing:content-box;
}
div[data-property="box-sizing"] > div ~ div {
  background:blue;
  box-sizing:border-box;
}