wrapper как width и как padding. В чем разница на практике?

* { 
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box; 
 box-sizing: border-box; 
} 
body { 
  margin: 0; 
  padding: 0; 
} 
.wrapper { 
  padding: 10%; 
  width: 100%; 
  position: relative; 
  background: #eee; 
  height: 150px; 
} 
.wrapper2 { 
  width: 80%; 
  margin: 10%; 
  position: relative; 
  background: #eee; 
  height: 150px; 
} 
.inner { 
  border: 1px solid #ccc; 
  width: 100%; 
  height: 100%; 
} 
.element { 
  position: absolute; 
  right: 0; 
  top: 0; 
  width: 20px; 
  height: 20px; 
  background: #c00; 
}

<div class="wrapper"> 
  <div class="element"></div> 
  <div class="inner"></div> 
</div> 
 
<div class="wrapper2"> 
  <div class="element"></div> 
  <div class="inner"></div> 
</div>

.wpapper { 
  padding: 30px 10%; 
  background: #ccc; 
  position: relative; 
} 
.abs { 
  position: absolute; 
  left: 0; 
  top:0; 
  background: red; 
}

<div class=wpapper>Обычный тест 
  <div class="abs">Спозиционированный элемент</div> 
</div>

.wpapper { 
  width: 80%; 
  padding: 40px 0; 
  margin: 0 auto; 
  background: #ccc; 
  position: relative; 
} 
.abs { 
  position: absolute; 
  left: 0; 
  top:0; 
  background: red; 
}

<div class=wpapper>Обычный тест 
  <div class="abs">Спозиционированный элемент</div> 
</div>