How to cascade Style Sheets Formatting Model

How to cascade Style Sheets Formatting Model

To cascade Style Sheets Formatting Model



Cascading style sheets are based on a simple block-oriented (or box-oriented) formatting model. Each element consists of one or more rectangular blocks (or boxes), which has a core content area with optional surrounding padding, border, and margin areas.





1.

Block (or box) width
2.

Margin (transparent)
3.

Border
4.

Padding
5.

Content
6.

Element width



This formatting model gives you much more flexibility in controlling spacing between objects. For example, by setting the top margin of one element to a negative value, you can make it grow into another element directly above it.

To best visualize the block (or box) concept, choose a background color for an element. The result is a colored block that extends over the entire width of the page and the height is controlled by its text content. You should set aside a little time to experiment with those properties—for example, set the padding to move the text within away from the edge of the block.