Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Set the box-sizing Property

When using box elements, e.g. div, to lay out a webpage or website template, it's important to understand how the dimensions of the box are defined. Back when Internet Explorer controlled 90% of the browser market Microsoft defined the dimensions of a box element as shown below.

Internet Explorer box model
Internet Explorer box model

Microsoft defined the width and height of a box element as the distance between the outer edges of the box's border. This makes logical sense to me.

But with webpage rendering rules varying wildly between different competing companies browsers, in 1994 an international consortium of companies got together to form the W3C (World Wide Web Consortium) with the purpose of creating standards for web page elements and how their properties were defined.

W3C box model
W3C box model

The W3C defined the width and height of a box element as the distance between the outer edges of the box's content. This makes no sense to me.

The CSS box-sizing property lets you change the way box element sizes are defined.

ValueDescription
border-boxThe width and height are the distance between the outer edges of the box's border
content-boxThe width and height are the distance between the outer edges of the box's content
initialHow width and height are defined determined by browser
inheritHow width and height are defined inherits from its parent element

Shown below is a default div without the box-sizing property, where the width and height refer to box's content.

<div style="width:200px; height:80px; padding:20px; border:1px solid black;">Div without box-sizing property</div> 

Div without box-sizing property

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro



Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268