The CSS Box Model.
The CSS
Box Model is essential for understanding CSS. The box model is a set of
standards for how the web browsers will be displayed and content on the page.
In the
box model the main features are border, background, padding, width and margin.
- Border - This is the outline of your box model. You can adjust the width and colour of the border. All you have to remember about this feature is that, it is the limit for your page.
An
example for this - border: 10px solid black;
- Padding - This feature sits in-between the border and content, this acts as a secondary border line for the box. This affects the background colour of the element.
For
example: padding: 50px or top padding: 25px;
- Margin - This is the box outside the box. This goes around the border of your box. These are spaces which can allow the box model to be positioned.
For
example: Float, Left and Right.
An
example of how this is set up is: margin: 10px;
- Content - This is information of the box. This is where all the data is stored like text and images.
This is
an example from my project, showing Div Tags and examples of style sheets:
Index
<div
class="Content"></div>
Style
Sheets
.content
{
width:
600px;
height:
600px;
background:
red;
padding:
5px;
}
http://www.cssnewbie.com/understanding-the-css-box-model/
