The CSS Box Model

The Box Model

The box model is what all layout in HTML and CSS is based on. Remember that everything in HTML must be in an element and to the browser all elements are boxes. The Box Model specifies what properties of these boxes you can work with in CSS. It controls the height, width, margins and padding as well as background image of each element. The focus here is on block level elements (p, div, ol, li, h1..h6, etc) not inline level elements (a, img, span, strong) because the block elements are used for layout and with inline elements some aspects of the box model don’t apply (so they can line up next to each other).

This is a great diagram of how the box model works:

the diagram is from: http://hicksdesign.co.uk/boxmodel/

Some things to remember:

  • Background images are above background color
  • margin should be used to separate block elements
  • padding should be used to separate content from the borders of the box
  • the width of the box is margin-left+border-left + padding-left + content + padding-right + border-right + margin-right

Here are some other links that explain the box model.

IE and the box model
Internet Explorer doesn’t always interpret the box model correctly. in IE6 especially it’s important that you have the correct doctype, otherwise your design may look very different. This article talks more about IE, and also gives a good explanation of the box model.
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

Other Links
http://www.yourhtmlsource.com/stylesheets/cssspacing.html
http://www.redmelon.net/tstme/box_model/
http://www.addedbytes.com/css/box-model/

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>