Hello and welcome.
In this video I will be explaining how the csx margin property works.
The Seer says marjane properties are used to create space around elements.
Each margene has four sides and you can use this here says my own property.
To set the margin area of all four sides of an element.
Now for size.
My modern properties are margin top margin right margin bottom and then the margin left when your year's
margin is.
You can specify the values for the margins.
Margins can be specified using 1 2 3 or 4 values.
Values can be applied to the margins based on the number of values specified.
So let's take a look at how the values are applied based on the specified values.
So this is a table.
See if you have just one value specified that value is applied to all or the full size of the margin.
If you have two values specified the first margin applies to the top and the bottom.
The second up lies to the left and the right when there are three values specified the first margin
applies to the top.
The second goes to the left and the right and the third goes to the bottom.
When you have four values specified the margins apply to the top the right the bottom and the left.
In that order.
So it's in a clock wise order.
The way I tend to room remember this is my using the word trouble.
So if you type in the word trouble take out the vowels.
You would be blessed with t r b l.
So when you how for value specified.
You need to apply it in that order.
Top right bottom left hand margin propertys have several values so the margin property can have lenth
value.
Percentage inherit and also the key word or two.
The lenth basically specifies in margin in pixel bind centimetre value and so on depending on whatever
unit of major ment you are using by basically specifies margin in whatever measurement you are using
which basically refers to the size of the margin as if fixed value.
Then we have the percentage.
This is the size of the margin as a percentage relative to do with the containing block or parent element.
So the percentage specifies in margin percentage half the width of the containing element.
Then we have to inherit which specifies that the margin should be inherited from the parent element.
We also have the key Ward 0 2.
Basically this is when the browser calculates the margin.
The browser will select a suitable margin to use certain cases.
The browser code sets value that will centre an element of value can be positive is zero G negative.
So now that we've have learnt a little bit about the here says my property.
Let's try to set margin for some hate him out element so far.
Look my His email here I am going to set a margin for my body element here so I'm going to my Seer says
and I just come here and type Him body to my curly braces and I separate it.
I'm going to make give the margin.
Property I am going to make it.
Give it to valiance.
First of all it's going to be zero.
And the second one is going to be Hall took them is I'm live in the second valley for the browser to
set.
We've already gone through how to apply the values.
So if I fight to save on here and just refresh my browser he can see the body has been retired.
So the margin for value is zero.
And that addresses or to them is the browser will reset it so you can set the margin property for as
many CML element as possible.
For example I could set a margin for this image if I also want to do that.
Next let's quickly go through this here says padian property is really similar to the Seer says margin
property.
The only difference is that Seer says padding property does not allow negative value.
Apart from that everything else is different.
Also Dave don't use all tool key word.
So let me just run through the properties of this here says padding which is really similar to that
of the here says Matt margin property.
So here for the padding the properties are used to generate space around the content of an element.
So if you think of this space inside an element that is known as a pad in this space outside the element
is known as the margin H.
Pi then has four sides just like the margin so we have the pad into the top pad into the right padding
to the bottom and padding to the left.
Just like the margin prop. padding can also be specified using 1 to 3 or 4 values because they have
4 sides.
So the application is the same way as that for the margin.
So if you got just one values specified it applies to all four sides.
If got to be applied to the top the bottom and then the second applies to the left and a right.
If you've got three values the first spending goes to the top second goes to the left and right the
third goes to the bottom.
If you will for values specify the padding is applied in the order of top right bottom and left which
is a clockwise direction.
The pad in propertys have the following values so if you got the length which specifies a padding hidden
pixels point centimetres or whatever measurement you are using.
And we also have the percentage which refers to a padding in percentage which is relative.
To do with of the containing element we also have the inherit which specifies that the padden should
be inherited from the parent element.
The key distinction between the pad in property and the margin is that we the pad in negative values
and not allow it.
So I'm going to add some padding properties here to my thesis.
When I had it in the body here is well to the body elements.
I'm just going to tap down and type in padding has a property okay.
I'm going to give it a fair value so when I'm giving it the full value it would be applied in the order
of top right.
But Tom left the key.
The way I tend to remember this is by the word trouble.
Both you take and the vowels from the word trouble who are left.
T r b l s.
How I remember it so I'm going to give this four values.
First of all be zero.
The unit of measurement is going to be pixels so combat is going to be 20 pixels would be 20 pixels
as well.
For a value between the pixels he can see that the fire expand this page he can see that he values the
padding is already taken apart and so has been apply.
You may not see that this that distinctly adeleke distinctively but it is applied you can see the space
padian refers to this space inside the content of.
Element.
All right so we've used for values here to apply padding to the body element to the bodies.
Basically the content that is visible so that's a theme for this video in this video.
I explained how the see says margin and padding property works.
They work in identical fashion.
The only key distinction is that the padding property does not allow negative values.
And also it does not use the two key words so there's added two distinct differences between the padding
and the margin property.
Thanks for watching and bye for now.