Box model (CSS)

From Wiki @ Karl Jones dot com
Jump to: navigation, search

In Cascading Style Sheets, the box model defines the web page layout of HTML elements.

Description

The box model is a rectangular box that wraps around elements.

Web page layout is based on the box model.

As a web designer, think of your web page layout as a series of rectangular (or square) areas which fit together as a series of boxes.

  • Some boxes are containers -- these contain other boxes.

Layers

In the box model, each box (HTML element) has several layers, nested inside each other:

Each layer has CSS properties which you can set using style rules.

Diagram

Boxarea.png

See also

External links