Css Box Model

CSS relies on the Box Model.

Elements on a page, such as text or graphics, are contained inside a set of boxes.
By default they are invisible, but by setting their css colour properties we can see them.
They consist of an outer margin, a border and padding.
Margin
Border
Padding
The actual element



The properties size of all these can be controlled with CSS.

For example with these properties,
background-color:darkgreen;width:200px;padding:10px;
border-width:10px;border-color:goldenrod;border-style:solid;

We can style a div as
The actual element

We can even set individual border properties in this case the colour.
background-color:darkgreen;width:200px; padding:10px; border-width:10px;
border-color:red green orange blue;
border-style:solid;

The actual element

Css only Shapes 3D CSS Objects
Exercise
Create a web page that displays a Div containing some text and set its border and padding properties.