Hello everyone and welcome back.
In today's video we will learn more about margin and panic.
So you have this paragraph and you want to add some space between the water and the content in this
scenario that you will use bagging.
Let's try an example.
So let's bring up our quote editor.
So we already got an idea for a second paragraph.
So coming back to our seats is fired.
So what we need is bottom.
So let's adopt so batting save 16 pixels.
Let's save it.
And now as you can see you've got some space between our content on the bottom.
Now say you want to have different buildings on different sides.
So for that we've got more binding properties routing top C on the top we need sixteen pixels.
Right.
Say 20 pixels
batting left say 24 pixels but top say 28 pixels.
Let's say that and as you can see they've got different buildings on different sides.
Also if you notice these four properties are overriding our activist properties so if we make this as
a hundred pixels.
So as you can see all the different sides have still the same padding.
Other than the batting bottom because we haven't given a value for batting bottom here.
So if we change this to batting water and we save it.
So none of the sides have a hundred pixels spotting this hundred bits of batting was ordered in by all
these other food values or let scum in these final so we've got another way of writing these links 20
from different sides.
So this is like a shorthand version.
So batting say on batting doctor got 16 pixels than on the right we've got 20 pixels in bottom say 24
pixels on the left see 28 pixels.
Let's say that.
And as you can see we still about different bindings on different sides.
So again we've been working with these shorthand rotations sequence is very important.
So the first value is for batting top.
The second values of batting right the total values for batting bottom and then the last value is for
the batting left.
So it goes clockwise top right bottom and left now so you have batting something like this.
So batting for batting top you had see 24 pixels but in right you had 48 pixels for bottom bottom you
have 24 pixels and so batting left you had four the eight pixels that same and as you can see you've
got the same batting on top and bottom and left and right.
So in this case what we can do is we can remove these last two values so even this value presents batting
top right bottom and left just that we've got two values you so minimally just give two values so the
first value is used for top and bottom.
Second value is not used for left and right all right guys.
OK so moving on to the margin boy.
So you want to add space outside the border.
So here we would use margin.
So let's try that.
Say margin for the exits.
Let's say that.
And as you can see we've got space outside the border.
So we've got some white space on the left top on right again just like padding.
You can define margin different values on different sides.
So margin top say forty eight pixels margin right.
Say 24 pixels margin bottom say 32 pixels and margin left say 60 pixels.
Let David and as you can see we've got different values on different sides.
So the spotting is a bit more than the right hand side and so on so even for this we have a shorthand
rotation so we could simply use margin.
So for dot we had 48 pixels.
Again space followed by margin right.
Which was 24 pixels followed by margin bottom which was 32 pixels followed by margin left which was
60 pixels let's save it.
As you can see on margin is still the same.
All right so again same margin same we've got on top 48 pixels right.
Sixty pixels.
Bottom 48 pixels on the left.
Sixty pixels so again you've got the same bottom on top bottom left and right.
So what we can do is we can remove these last two values so 48 would represent the value for top and
bottom and 60 multiples in the value for left and right that's also the day guys.
If there's something that you did not understand feel free to drop a comment and we will discuss it.
See you in the next video by Andy.
Gary.