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.