Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

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

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

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


Web Design Sections

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