how to Position in CSS, the box model

                                                CSS Positioning - the box model

In this section, you'll learn how to lay out your web pages using CSS positioning. Before doing so, however, it helps to learn about something called the CSS Box Model.

The CSS Box Model
An HTML page is regarded as a series of boxes stacked one on top of the other. These boxes can hold text in paragraphs, images, form objects, etc. Each box is divided up into four areas: a margin, a border, some padding, and finally the content itself.

The margin is transparent and goes around the border. You can't set a colour for margins. It can be big, or set to zero and snuggle right up against the border.
The border goes around the padding and the content. It can take a colour, a size, and a border type (dotted, solid, etc).
The padding is the space between the content and the border. It takes the same colour as the background for the entire box.
The content is things like text and images - the whole point of the box.
All four areas can have their sizes set, You can also set individual sides, if you want:
margin-left: 10px;
margin-right: 20px;
margin-top: 30px;
margin-bottom: 40px;
By just using margin, though, you're setting the margin for all four sides. The same is true for border and padding: you can set all four at once, or just set individual values by adding top, right, bottom, or left.
To get the total size of the box, you add up all four parts: margin, border, padding, content. For example, in the code above we have a width of 300 pixels for the first paragraph (the width refers to the content area). The margin is 30 pixels on each side, giving a total margin width of 60 pixels. The border is 1 pixel on the left and 1 pixel on the right. The padding is 20 pixels on the left and 20 pixels on the right. The total width of the entire box is therefore:
Left margin 30
Right margin 30
Left border 1
Right border 1
Left padding 20
Right padding 20
Content width 300
Total box width = 402 pixels
So although we specified a width value of 300 pixels, the width of the box around the entire paragraph was actually 402 pixels. You need to bear this in mind when setting values like this, especially when you float elements left and right. For example, if you have a navigation area floated left then it's a good idea to set the width value, and all of the others values: just remember to add up all the different sizes when calculating the overall size.

by #adminBiigzee

--- -----
i hope you are all getting your template web page ready for the competition at the end of this tutorial, remember, only the best designer will be Rewarded.
--------