As from the name, the content of a page is positioned inside boxes which can, at their turn, contain other boxes of content such as inline and block element.
Those blocks, other then the content itself, can be made of margins, paddings and borders using the following css properties:
- margin: the transparent and empty space in between different boxes in units of measure or percent
- padding: the space in between the content and the border of the box in units of measure or percent
- border: the decorative border around the box in units of measure or percent
NB: margin, padding and border can be specified individually to the right, left, top, bottom, adding those terms to the property (ex: margin-top, padding-left, border-bottom…)
The content itself can have a specific width and/or height with the css properties:
- width: the width in units of measure (fixed width) or percent (fluid width)
- height: the height in units of measure (fixed height) or percent (fluid height)
The box can finally have a decorative background with the css property background.
All together, those css properties form the so-called box-model as represented in the following image:
{ 0 comments }
