Welcome back to another lesson in the previous lesson.
We saw that each element is indeed a box with three important properties padding which is the inner
space between the content and the boundary border which is the boundary itself and margin which is the
space outside the boundary.
In this lesson I’m gonna talk about these three properties more in detail.
So let’s start with padding in the last video.
We added padding to the header element that increases the inner space from all four sides.
Likewise we added the margin that increased the outer space from all four sides.
And this is because we provided only one value which is 50 pixels for this padding.
And again 50 pixels for this margin.
This is actually a shorthand way when we have all four sides of the core lent so typing only one
value communicates that all the four sides that is left right top bottom are 50 pixels.
But how about when we want to provide different values for different sides.
So, in that case, we have two options.
The first one is very straightforward.
Let’s say you want to only specify the left padding value.
So in that case you can provide padding-left property and set its value.
Let’s make it 40 pixels.
Now we have added the padding only to this left side in the same way we can add padding died and let’s
make it 50 pixels then we can add padding-top and let’s make it 60 pixels.
And lastly padding-bottom and let’s make it 70 pixels.
Let’s see it on the website.
So now we have different values for different sites this is the same for margin as well.
We can add margin-left
and likewise we can have border-left border-right both the top and bottom the bottom.
I’ve come to border properties as well in a moment.
So this is one way.
Let’s now talk about the Adobe which is also a shorthand way for different situations and using that
we can save these extra lines.
So let’s try to get the same results as these padding-left right top bottom in just one line.
So I add padding just like I did in the beginning and then I can add four values separated by space
in an order.
The order is that first, we can add the top padding which is 60 pixels then space and then the next value
will be for the padding-right which we added as 50 pixels.
And space again and the third one is padding-bottom which we added as 70 pixels.
And lastly the padding-left as 40 pixels.
So if we provide for values inside the padding property then first one is going to be taken as the top
The second one as the right padding third one as the bottom padding.
And the fourth one as the left padding so in just one line we can provide all four values so if I remove
the above four lines as I don’t need them anymore and then save.
And then when I refresh.
Nothing changes so this one is producing the same output in the same way I can at the margin property
and set the same values
now you can also provide just three values now this time.
The first value means padding-top.
Same as earlier.
However the second one means left and right.
And the third one means padding-bottom so top padding is 60 pixels right and left ones are 50 pixels
each and bottom one is 70 pixels.
So you can use this method and you have the same left and right values.
I save again and then reload.
Then we have the padding size with the same left and right padding all 50 pixels each next.
If you add only two values and this time the first one means top and bottom.
And the second one means left and right.
So now the top and bottom padding are 60 pixels each and right and left padding are 50 pixels each I
save again and then refresh and here’s the output.
So you can use this option when the top and bottom are the same values and left and right are the same values are
different from top and bottom.
And lastly, if we add only one value and this means that top bottom left right each one is 60 pixels
I save again and then refresh.
Now all four sites have equal padding of 60 pixels.
This is the same for margin as well.
So if I keep only one margin value then all four sites are going to have the same margin the same way.
I can add two or three values as well.
Just like in case of padding.
So these are the different ways you can specify the padding and margin properties values.
Now one thing to remember here is that you should go with this method only when you want to modify the
values of all the four sites Cause whether you keep one value two values three or four values they mean
something for each side.
So when you want to specify the value for only individual sites.
For example, if you want to specify only the left padding and keep all the other padding values as default
then you can better use the padding-left property and set the value.
The same goes for margin as well.
So after the padding and margin.
Let’s now talk about the border properties and we have added the border property within the universal
selector and for the border first we can provide the border thickness of it as I mentioned as one
And comes the border style and we get different style options like solid dotted dashed et cetera including
none and hidden.
So the value of None means no border.
And this is also the default value in the browser’s and then the value of hidden simply means that there’s
a border but it is hidden.
So while hidden it’s still there and occupying some space depending upon the thickness that we have
And lastly we can provide the color and the default color is black.
So this is kind of a shorthand method.
But here we have three different values.
Now let me add the border property to this.
Each one element.
So I can add the border and let’s add the thickness as five pixels space solid as the border style space
blue as the border color I save again and refresh.
Now notice that everywhere we have the border as specified within the universe’s electoral map just
for the header each one, the border property is different.
As I just modified so in assess if you provide any property for any element and then if you add another
the property later than the latter one is preferred.
And this is valid for all properties to demonstrate below the border that we just added If I added again
with some different values
then this time if I save and refreshed then we get the later values applied likewise in this case if
you specify the property inside the selector and then provide another value for any other element
like this H1.
Then for that other element the values provided will be applied.
So in simple terms what comes later is applied.
All right so coming back to the border here, we have now eight pixels of it dashed line in blue color
as added inside the H1 element.
Apart from that if I just add the border-color
and set a color then it will override the property and set the new color for all four sites as a workaround.
If I make it border top color then this will be only the border-top color same way we can a border-right
color border-left color border-bottom-color and then for a style we have border-style border Topsail border
bottom style border-left style and border-right side and the same way border of it with border-left
with border-right with border target or border-bottom with.
And lastly, for each one we can use the shorthand like if I use for example border color and mentioned
four colors then just like padding and margin the order will be the top right bottom and left
again it works the same way as with padding and margin in the same way three values means the top color
left right color and bottom color and then two values mean top-bottom color and left-right color.
And finally one value means color for all sides.
Likewise border style and border it can also have 42 or 1 values.
So this is how you can use the border padding and margin values.
Now before we finish I must tell you a couple of things.
Number one we can see the box model of each element on the browser as well.
So if I go to the browser and then click on the right mouse button and then click on this inspect option
and I’m using the Chrome browser then you can see the windows on the right with information about the
And here we have the stylus which will show us the page see assessed properties with their values and
at the same time if you hover over any element.
Well it’s not working but we can click on this cursor that says select an element to inspect.
So I click on it and then the element inspector is now activated and any element I click I can see its
And within the style step I can see the CSS properties of the web page.
Then this is the box model of the element.
And here you can check the margin border and padding properties and cross-sector values.
You can find a similar option in other browsers as well including Internet Explorer and they are generally
located within the developer tools option and for many browsers including this chrome the shortcut is
So if I close it and press F twelve then also I get to see the same window moving on to the second point.
Different elements already have some preset default margin and padding values like each one by default
has some predefined margin to show you.
Let me first remove all the margin and padding properties from here.
And also remove this border from the universal selector and then save and reload.
Now all the properties from this H1 have gone and now if I check again using the inspector element
it now has border and padding is blank but it has top and bottom margin similarly if I inspect this
the paragraph then the paragraph has no border or padding either but margin.
So sometimes when elements are taking up some unusual spaces then you can check here to find out what
are these values and troubleshoot.
This really helps and you do these different preset values.
You will see many developers mostly adding two lines within the universe’s selector as margin zero and
And this way this had all the default page margin and pairing 2 0 and one can simply add these properties
for different individual elements so we now have everything set to 0.
Let me check on the website and you can now see that there is no margin or padding now and it looks
So these different values are there to give a decent style to the web page.
In the absence of any CSS assessed properties specified.
Now if you provide any properties such as margin to let’s say this H1 element
and then check again and there we have to margin so there can be some preset margin padding or border
values by default for some elements.
And lastly as mentioned here you can set the padding or margin value as zero and you can also provide
So if I said the margin as negative 10 pixels and see it on the website then that’s also fine.
So this negative value can also be used when there’s some default value and you want to reduce it whereas
for the border you can set the value as none.
So this was about the padding border and margin properties using which you can control spaces and organize
Also, Read –