CSS Box Model: The Foundation For Improving Your CSS

CSS Box Model Illustration

CSS Box Model Illustration

The CSS box model lies behind everything you do in CSS. Every element is defined by a rectangular box that encloses that element. Understanding how the box model works is a key to understanding CSS and having greater control over your layout and presentation. . . . .In nutshell, the box model in CSS describes the boxes which are being generated for HTML-elements. ~ Steven Bradley ~

Details covered in the article include:

  • What is the CSS Box Model?
  • Differences Between Block Boxes and Inline Boxes
  • Floats, Positioning, and the Normal Document Flow
  • Calculating the Widths and Heights of Boxes
  • Issues with IE6 and the Box Model

Read  CSS Box Model: The Foundation For Improving Your CSS and you will learn the tips and techniques for working with the CSS box model.

Additional Resources for Understanding the CSS Box Model

If you are using Expression Web, you will see an example of the css box model reference in the Modify Style or New Style Dialog Box when you select the Box category.

Expression Web CSS Box Model Reference.

Expression Web CSS Box Model Reference.

Comments

  1. Every element is defined by a rectangular box that encloses that element. Understanding how the box model works is a key to understanding CSS and having greater control over your layout and presentation.Great information thanks for sharing.Great post nice one for posting.Good information nice one for posting.
    Phil
    Supercool Freelancer
    Web Design Newbury

Speak Your Mind

*