Core Code
Core Code Modern Dev Handbook

Layout With Border Box

border-box simplifies layout calculations.

Preview

Code

<style>
.container{
display:flex;
gap:10px;
}

.box{
flex:1;
padding:20px;
border:4px solid #2563eb;
box-sizing:border-box;
background:#e5e7eb;
}
</style>

<div class="container">
<div class="box">Column</div>
<div class="box">Column</div>
</div>

More CSS Box Sizing Examples (8)

example Content Box Model open example example Border Box Model open example example Box Sizing Comparison open example example Global Border Box open example example Form Input Box Sizing open example example Grid Layout Example open example example Card Component Example open example example Box Sizing Reset Pattern open example