<header>
  <h1>Padding and borders examples</h1>
  <p>So, basically... Drake is the element... and his jacket is the padding... and the space he's trying to make with his hand is the margin? <strong>Yes. Just like that.</strong></p>
  <p>So, are the borders just like ? <strong>Yes.</strong></p>
</header>


<section class='with-content-box'>
  
  <h2>With box-sizing: content-box;</h2>

  <picture class='drake one'>
    <img src='https://assets.codepen.io/4806767/drake-element.jpg'>
  </picture>

  <picture class='drake two'>
    <img src='https://assets.codepen.io/4806767/drake-element.jpg'>
  </picture>

  <picture class='drake three'>
    <img src='https://assets.codepen.io/4806767/drake-element.jpg'>
  </picture>

  <picture class='drake four'>
    <img src='https://assets.codepen.io/4806767/drake-element.jpg'>
  </picture>

</section>
    
    
    
<section class='with-border-box'>
  
  <h2>With box-sizing: border-box;</h2>

  <picture class='drake one'>
    <img src='https://assets.codepen.io/4806767/drake-element.jpg'>
  </picture>

  <picture class='drake two'>
    <img src='https://assets.codepen.io/4806767/drake-element.jpg'>
  </picture>

  <picture class='drake three'>
    <img src='https://assets.codepen.io/4806767/drake-element.jpg'>
  </picture>

  <picture class='drake four'>
    <img src='https://assets.codepen.io/4806767/drake-element.jpg'>
  </picture>

  <footer>
    (this is what you'll want to use!)
  </footer>
</section>

.drake {
  display: inline-block;
}


/* PLAY AROUND WITH THESE! */

.one {
  width: 100px;
  padding: 8px;
  border: 26px solid pink;
  
  margin-top: 10px;
}

.two {
  width: 100px;
  padding: 15px;
  border: 5px solid pink;

  margin-top: 10px;
}

.three {
  width: 100px;
  padding: 10px;
  border: 10px solid pink;
  
  margin-top: 20px;
  margin-right: 5px;
  margin-left: 20px;
}

.four {
  width: 100px;
  padding: 4px;
  border: 10px solid pink;
  
  margin-top: 12px;
}














































/* just to help set up our point. All will be explained soon */
picture {
  display: block;
  margin: 0;
  background-color: #D15D29;
}

/* see this Pen for expanation */

picture img {
  display: block;
  width: 100%;
  height: auto;
}

.with-border-box * {
  box-sizing: border-box;
}

section + section {
  margin-top: 40px;
}

header + section {
  margin-top: 40px;
}

h1 {
  font-family: sans-serif;
  font-size: 30px;
}

h2 {
  margin: unset;
  font-family: sans-serif;
  font-size: 18px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.