Web design Tutorials Lesson 5.( Part 1)

CSS Positioning - the box model

 In this section you may find out how to get out your sites exploitation CSS positioning Before doing therefore, however it helps to find out regarding one thing known as the CSS Box Model.

The CSS Box Model

An hypertext markup language page is considered a series of boxes stacked one on prime of the opposite. These boxes will hold text in paragraphs images kind objects etc every box is split up into four areas: a margin, a border, some artifact and eventually the content itself:

The margin is clear and goes round the border you cannot set a color for margins It is massive as within the image higher than or set to zero and snuggle right up against the border.

The border goes round the artifact and therefore the content. It will take a color, a size, and a border kind (dotted, solid, etc).

The artifact is that the house between the content and therefore the border. It takes an equivalent color because the background for the complete box.

The content is things like text and pictures - the entire purpose of the box.

All four areas will have their sizes set. within the code below, we've established 2 paragraphs of text:

CSS code for 2 paragraphs lightness in the box model

All we're doing is setting a height and dimension for 2 and therefore the artifact (We've additionally further a color therefore you'll be able to see what it's like within the browser.) Here's the result:

Notice the scale of the margins encompassing the border. the primary margin is thirty pixels on all four sides you'll be able to set you want:

margin-left: 10px;
margin-right: 20px;
margin-top: 30px;
margin-bottom: 40px;

By simply exploitation margin, though, you are setting the margin for all four sides an equivalent is true for border and padding: you'll be able to set all four right away or simply set individual values by adding prime right bottom or left.

To get the whole size of the box you add up all four parts: margin border padding content for instance within the code higher than we've got a dimension of three hundred pixels for the primary paragraph (the dimension refers to the content area).

The margin is thirty pixels on either side giving a complete margin dimension of sixty pixels The border is one pel on the left and one pel on the correct. The artifact is twenty pixels on the left and twenty pixels on the correct the whole dimension of the complete box is therefore:

Left margin thirty
Right margin thirty
Left border one
Right border one
Left artifact twenty
Right artifact twenty
Content dimension three hundred

Total box dimension = 402 pixels

So though we have a tendency to given a dimension worth of three hundred pixels the dimension of the box round the entire paragraph was truly 402 pixels. you wish involved this in mind once setting values like this particularly after you float components left and right. for instance, if you've got a navigation space floated left then it is a sensible plan to line the dimension worth and every one of the others values: simply bear in mind to feature up all the various sizes once shrewd the general size In the next lesson you may find out how to a add comments to your CSS code.