I Let's learn what is the CSS box model?
The CSS box model is the basis off on layout control for the webpages.
It is very easy to understand and use.
Allowing us to position and space are HTML elements exactly as we want.
There are four important elements in the box model.
The first is our content.
That can simply be an image are some texts and that is represented in these image at the
center.
Second element that is around the content is betting death,
defying to the space between our content and the edge off the element.
Next,
we have the border element,
which we can use to draw a line around our content and to finish.
We have margin,
which defines the space between the edge off the element and any other element off the page
.
So let's look to the street properties inserted in this model and see some of them starting
with CSS border.
That is the property that allow you to specify the style with and caller.
Often elements border,
and he's a short and property for the following individual border properties,
the border wheat property that specifies do it's off the four borders do border style
property that specifies what kind of border to display and the border color that is used to
set the color off the four borders.
If you use Onley,
barred their property,
you real effect all the four sides often element like this example where I ever style for
my bereft border to effect all sides with a border wheat off 10 pixels bar their style.
We saw his value and blue as my border caller.
So what happens?
You see these values applied in the paragraph like you can see in the browser in the least
off CSS properties You see that U F individual properties for each side left,
right,
stop and bottom that can be used to change Onley one side off the border if you want.
So if instead of border I use border top on Lee,
the top side off the paragraph is affected with this property.
That's what I'm going to do now Apply on Lee this property to border ducked.
We'd saying values Onley changing barter style to dashed.
So you see that this style is only applied to the top off our paragraph.
Now let's look to the CSS margin property that is used to add space around elements.
First,
I replaced border values to Evel for borders.
We'd same style.
Now I m margin property to our paragraph rule.
And if I simply create a margin with 100 pixels,
this will give 100 pixels to all margins off the paragraph.
I had now another pair if to see better the margins between these two elements if I simply
changed to a lower margin value.
The distance between the two elements decreases as expected,
Margin property is just a simple,
shortened property for the individual margin properties margin top rights bottom and left a
similar situation that happens with border property.
Now,
if I want only change,
stop margin off second pair if I have to waste to do it before I write C Assess And since I
want to apply changes all in second tariff,
I can create a class for my second paragraph that I give name text now in CSS code,
I make the rule for this class with margin top property.
We'd value one ever pixels and delete the previous rule inserted for paragraph elements.
At this moment,
I just have a margin top applied in the second paragraph using the correspondent class name
.
Other way that I can use is with margin property giving the Valley for all four sides 100
pixels for top zero for rights but,
um,
and left using margin property with value 100 000 The first value represents margin.
Top second value with zero margin,
right certain margin bottom and last margin left that is,
in practice,
the same as use margin.
Top with value 100 pixels Now to finish margins if you want.
Just margin left and right with 50 pixels and the others with zero,
you just need to write zero 50 pixels zero and 50 pixels to finish the box model elements.
The padding property that is used to generate spice between content and margin and uses
very similar with margin property.
There are CSS properties for setting the bedding for each side.
Often element top rights bought them and left.
But like margin,
you can use the shortened property padding that used for individual properties for each one
off the far sides.
I changed now my second paragraph style,
and there's a petting off 20 pixels and you see that spice between text and margin off
second paragraph increases.
If you only want to change just bottom value,
you can simply use spending bottom with 10 pixels are you Use bedding property with zero
zero,
then pixels and zero being deserted.
Valley correspondent to petting bottom property.
It's so for now,
things.