The Box-Sizing Property: Difference between Content and Border

Kurt Maine Articles September 26, 2011

One of the new properties introduced in CSS3 is the box-sizing property. box-sizing: content-box; uses the box-model that everyone is used to, sometimes called the “W3C Box Model”.

While box-sizing: border-box; uses the box-model that people have come to associate with Internet Explorer, where the dimensions of the padding and border are included in the element’s dimensions.

Take a moment to look at the diagram below to get a visual demonstration of the box-sizing property in CSS3.

CSS3 Box Sizing Model showing Content-Box and Border-Box

About: Kurt Maine

Kurt Maine is a Full-Stack Web Developer and an early adopter of Node.js whose professional experience has spanned several languages and frameworks, namely Ruby on Rails, C#/VB.NET and the Symfony and Laravel PHP frameworks.

Leave a Reply

Your email address will not be published. Required fields are marked *