Core Code
Core Code Modern Dev Handbook

CSS Box Model Width Calculation

Padding and borders increase the total width of an element.

Preview

Code

<style>
.box{
width:200px;
padding:20px;
border:10px solid #ef4444;
background:#fecaca;
}
</style>

<div class="box">Total width includes padding and border</div>

More CSS Box Model Examples (8)

example CSS Box Model Basic open example example CSS Box Model Content open example example CSS Box Model Padding open example example CSS Box Model Border open example example CSS Box Model Margin open example example CSS Box Sizing Border Box open example example CSS Box Model Layout Spacing open example example CSS Box Model Visual Example open example