Understanding Line Height, Padding and Margin in CSS

Hello guys.

Welcome to our CSS series.

In our last segment we learned about CSS icons.

In which we had seen how we can link Font Awesome, Bootstrap and Google icons in our website and use it.

I hope you have practised all the practical that we had performed on CSS icons.

Our today's segment is on 3 properties of CSS that is line height, padding and margin.

We're going to go through all these three properties one by one.

We will start with the line height property, like it is written here, the CSS line height property is used to define the minimal height of line boxes within the element, it sets the difference between two lines of your element.

Basically, this line wants to say that when we add two lines in our web page, the gap that is there between those two lines, how much that gap should be and how we can set it that we can declare with CSS’s line height property.

It defines the amount of space above and below inline elements, it allows you to set the height of a line independently from the font size.

Which means there is space declared between two lines with the line height property and when we give the line height property that doesn't make any difference to the font size.

Even if you have taken a font size as big as h1 tag or h5.

Line height remains the same for every element.

When we give the line height, it totally accepts three things as values.

First is, like it is shown in the example, we can give this value in numbers, we can also give the value in percentage and we can give the value in length values like pixel, point and centimetres.

So, we will see practical on each one of them to see how it works.

So, we will open the sublime text, in Sublime Text in HTML, Example, line height, save, line height.

We will also run this program.

So, this is our program.

So, to see the line height the first thing that we will do is we will take, let's say p tag, this is a statement created to check line height property.

We have intentionally written a big statement.

We will copy the same statements six times.

We will save it, okay.

So here we are seeing our statement six times and you can see that in between these, there is line height, which means there is some space after every line and before every line.

Means there is space before and after the line, the same space is before and after it, means in between two lines we are able to see some space.

So, if we set the line height here… I am taking the body element in the p tag.

In the body, line height.

Like it was shown in the slide.

The 1^st thing is that we can give it in numbers.

So, let's say we take the number here 1, we are not taking px or percentage, only line height 1.

We will save this and we'll reload it.

So, if you can see, our height has shrunk a little.

If I make this line 0.5 instead of 1.

Our line is becoming smaller.

If in place of 0.5 I make 0.2, space has further reduced, if I make it zero, we're getting very little space.

So, if you start the line height from zero, we are getting very little space.

Let’s check if it accepts minus values or not.

No, as soon as we've added minus values our line height becomes like it was early on.

Means minus values are not acceptable.

Starting from zero we can set our line height.

So, this is for zero.

After zero 1, 1.5 is also acceptable.

You can even give 2 or 2.5.

As much as line height you want to increase between two lines, you can do it.

So, this is line height.

Currently I will keep 1.5 here.

Here I will give one heading.

Line height with number value.

Save.

Okay.

So, this example is with a number value.

If I give in this body, the text aligns the centre.

So, this was our line height, in which we had given the values in numbers.

Now I will generate one division.

And in this division I will take a few p tags.

We will keep the same things.

This is a statement created to check line height property with percentage values.

Okay so, if we copy this as well multiple times, I have taken five times and same h3 I am writing here as well.

Line height property with percentage values, save and here I will give class to the division, class, % line.

We get a default line height of 1.5.

Let's change it, percentage line height.class name and in it the p that is there, we will make this applicable to that.

Let’s say, line height, if we want to give it in percentage, It will start from 10% for example, as soon as I give 10% here my lines start to shrink, they come close to each other.

If I reduce it further and make it 1%, my line has come even more closer and if I make it zero, I do not get any effect, means 0% is not affecting, starting from 1% it starts, 2%, I will give 10%, it is again increasing, I will give 20%, it is increasing all the more.

If I give 50%, there is a lot of space, it is increasing more.

In case we give 100%, the 100% value we are getting which is equivalent to number 1 value.

If I increase from 100 to 500.

We are getting a lot of space between the lines.

So, this is the line height property, we checked it with numbers and percentage.

So, we can give it in percentage as well.

For example, I am keeping 50 here.

Now, I'll copy this same division again.

This time I will take pixels instead of percentage.

In pixels means value.

So, we call it length, length, line height.

Okay. (Pause)

So, here comes our line height with length values.

Now, we have not given any length, so now we will use it… length line height, in that P.

So, here line height, now we have to pass the values in pixels.

Let's say I start with 10 pixels.

So, when I have taken 10 pixels, my line height remains this much, if I keep one pixel, my lines come very close.

Same way if I keep increasing it.

If we make 10 instead of 50.

We're getting a lot of space.

Let’s say I make it 20.

So, for that I'm getting this much space.

So, we have seen different examples of line height, line height with number values, line height with percentage values and line height with length values.

So, you can see that we can give line height in three ways, one is through numbers 1, 1.5, 2, 2.5.

We can even give it in percentage or even in length, px, pt or centimetre.

We can give it to them.

 So, these are different ways, how we can give line height (repeat).

I will correct this program.

Our line height with number values.

By doing this there will be consistency in our program, that in all three places we have made use of only classes in the place of percentage, number okay.

And in the body we will take this, okay.

So, this is with our numbers, this is with percentage and this is with our length.

This is how with different numbers, percentage and length we can set the line height.

Next we will go to our slide.

This was line height.

Now, comes CSS margin property.

So, now what is the margin? So, the two points margin and after that padding, these two are very important parts of our CSS box model.

So, today we will also see what box mode is.

But first we will see what the margin is.

So, whenever we have any element with us, if to those elements we want to apply some distance from the side.

Then we normally make use of margin property.

When we use the notebook.

Let’s say we write something.

The leftmost portion in our notebook, we leave it as margin.

So that we can place the numbers over there 1234 or we can write any note there in small letters.

After that, we start writing in our notebook.

So, this is the margin, we live a little margin from the left side, we will start the writing.

We can use the margin property and this margin property we can use everywhere, not only the left side, in the left, right, top and bottom, everywhere.

Everywhere we can use margin property.

 So, basically if we conclude this so what is the margin, if we have any element, any element on top, side and bottom of it.

How much space we have to leave from those elements to place our element, we have to locate on the webpage? This property is called the margin property.

So, a guy's margin is always dependent on another element.

Means if I take any square, rectangle, circle, or any element of HTML.

So, I have not kept anything on my webpage.

So, it will consider the margin from the body element, I've placed other elements, my current element will check and calculate the margin from my other elements.

Like it is mentioned in the slide.

CSS margin property is used to define the space around elements that means around one particular element, how much space do we have to leave that we decide with the margin.

It is completely transparent and doesn't have any background colour.

Whenever we give the margin, we cannot give background colour to the margin.

If we have already given the background colour, let’s say we have given it to the body, to the body tag.

That we will see while leaving the margin.

But if we have not defined any colour, in that case we will not see the background colour in the margin.

Clearing an area around the element means leaving the element, keeping some space leaving the element.

That is called clearing an area.

Here a few properties are given, like top, bottom, left and right.

These four things are considered in our margin.

All these four we can define in four ways like it is mentioned in the slide margin left, margin right, margin top, margin bottom.

We can use these different properties in four ways or we can use it’s shorthand method, margin as well.

So, we will see this with a practical.

I am generating a new program for margin.

HTML, example margin, margin.html.

Let's say I take an element, let's say I will take a heading tag.

Sorry, I will take a div tag first and in that I will add one heading tag.

Let's say, I will give the div class, check.

This is a Heading tag.

Save, we'll run this program.

This is our program.

Okay.

So, this is a Heading tag.

Because we have to check the margin.

So, let’s say in the body.

In style tag, in body, I will give text align, centre.

Okay, so my content has come in the centre.

Now, I have to check the margin property, how much margin I have left and from where.

For that I will give background colour to the body, I will give a light colour, like light green.

Okay.

My heading tag which is there, I will give h1, to h1 I will give let's say a background colour, orange.

So, this is my heading tag, green colour is my background and the heading tag colour is orange colour.

 Now, I will do one thing.

This orange heading tag that is there, I want to get it down more than it is visible now.

In that case I will give margin to h1, top, as I have to make the margin from top to bottom.

So, margin top 100 pixels, save, reload.

So, this is coming down with 100 pixels distance.

So, this is my margin from top.

So, my heading tag which is there, outside that there is a division check margin, we have not given any CSS to that.

So, what is even outside of that, let’s say my body tag.

From body tag till h1, there is a distance of 100 pixels.

From up with the 100 pixels distance, our element has been pushed down.

So, here my h1 is coming down till 100 pixels distance.

Now to this same h1, I have to give some distance from the left-hand side as well.

So, let's say from the left side, margin left, I give 50 px.

I will reload, so what is happening here, from where does my tag starts, after leaving 50 pixel space from the left side.

If I want to leave the same from the right side, 50 to 100 pixels, so let’s say I will take the margin here, right, 100 pixels.

It is being placed after leaving 100 pixels space from the right-hand side.

If I take the margin here from the bottom, let's say 100 pixels, that will not be visible here.

I'm reloading but the effect is not coming here, the reason is there is only one element, there is no element below.

If I place an element below and then give the margin then it will take that much space from that element.

So, let’s say I will take one more h3 like tag.

This is heading tag 3, save.

I will comment on this margin bottom temporarily.

Okay.

So, here my heading tag is coming and I will give h3 a background colour.

Okay.

So, this is my heading tag 3, this margin is a default margin.

Now I will increase this margin and add margin bottom property by 100 pixels.

Save and load.

So, from below, what my heading tag, h1 tag has done, from above 100, below 100, 50 from left side and from right side 50.

That much space they have occupied.

They have left that much margin and after leaving that much margin.

That content is getting placed here.

So, if I want to leave the space from top, I will use margin top individually.

If I want to leave the space from the left, I will use margin left.

If I want to leave space from right, then margin right.

And If I want to leave from down, I will use margin bottom.

Now, if I want to write all these 4 things together in one tag.

For that we use shorthand property and that shorthand property is only margin.

That’s it!

Now I will comment these 4 things.

Save and load.

Okay.

My property and all the margin have come out.

If we see the margin in clockwise direction.

Then the 1^st one that comes is top.

So, I want from the top 100 pixels and then comes.

Then comes clockwise right, so I want 50 pixels from right.

Then comes bottom, if we come clockwise down, then bottom, in bottom let’s say as an example, I will take 20 px.

Then at the end comes left, so from the left I want 50 pixels again.

So, I will save it and load it.

So, what has happened here, 1^st is my 100 pixels, so from the top 50 pixels.

Then comes right, that is 50 pixels.

So, from here 50 pixels.

Then comes the bottom, that is 20 pixels.

So, from the bottom 20 pixels.

And then again left, that is here, 50 pixels.

 So, clockwise, 1^st  12 o’ clock, then 3, then 6, and then 9 o'clock happens.

In the same way 12 means top, then you have to take right, then bottom, and then left.

In this way you have to define the property. For example, the property of how much it is on top, that much on bottom and how much it is on the left, that much on the right we have to leave.

In that case you can use one more shorthand way.

We want to leave on the top and bottom the same margin.

Let's say I take 100 pixels here.

And on the left and right also I have to leave the same.

So, I will write 50 pixels here, that’s it.

 So, if I am using only two values, the first value indicates top and bottom.

And my second value indicates left and right.

So, save and reload.

What happened here is 100 from top, 100 from bottom, 100 from left and 100 from right.

In this case I have given the value only twice, left and right.

In this way, our margin is left.

If I want to write this property only once.

In that case what will happen, margin, let's say I write here, 100 pixels.

In that case what will happen.

You have seen that the space from here is cut means how much 100 pixels I have given, means the value that I have given.

That is leaving the same margin in all 4 directions.

 Means on the top 100, on the right 100, below 100 and in the left 100.

Means in all directions, the same margin will be occupied.

So, here in total we have learned 3 ways of margin.

 If we write 4 times, it is in a clockwise direction.

That is top, right, bottom and left.

If we write it twice.

The 1^st value indicates top, bottom, 2^nd value indicates, left and right.

And if we write once, in all our directions, the same margin is occupied.

So, this was our margin property.

How we leave the margin.

I will save and load it.

Okay.

this was our margin, now we will go into the slide.

CSS margin.

Now we have seen the margin properties, shorthand properties also we have seen that also.

Here I have given the example, in which way you can leave the margin.

So, we have covered value length in pixels.

Now we will see value auto and percentage.

If we write this same thing, 10%, even then my margin will work.

10% is little less than 100 pixels.

So, this is leaving 10% space in every direction.

So, it means that when we work with the margin property.

We can give it in percentage as well.

There was one more value in slides.

Margin value in auto.

So, with auto what happens is that it leaves automatic calculated values.

For example, margin, If I give auto, you can see here that it is not leaving any more margin.

Auto is used when we have to centre align something.

Let's say I have to centre align my heading tag.

So, I will write here, margin zero space auto and I will load it, what will happen here is my heading tag will come in the centre.

Currently in the background we have taken a text align centre already.

Now we will do one thing.

We will comment both of them, okay.

So here it comes: this is the heading.

It is occupying the entire space.

Now this margin, zero auto, I will uncomment it and load it.

So, this tag of ours, how much space it has left from top and bottom, zero, and the content is in the centre.

If I give width to this h1.

For example, I will comment on this width of 500 pixels.

Okay so this is our heading tag which is with the width of 500 pixels.

If I uncomment margin zero auto.

So, you can see that my content is getting the centre line.

Heading tag is coming in the centre not my text, my heading tag is coming in the centre.

Margin zero auto property use is that whichever is my element, to centre align that element, margin zero auto property is being used.

So, this was our margin where we used the value in auto, then in length and in percentage.

And after that we have seen the shorthand property.

When we had used it four times, two times and one time.

We are not using it three times because we are not able to use it, more accurately comes in four, two and one case.

So, we have performed that practical.

 So, now we will go to our next topic, which is on CSS padding.

Padding means that if a margin element leaves the space from outside, it pushes itself from there.

If we consider it like that.

If I give margin top, then from top to bottom that much.

If I give top then top to bottom and if I give left, then from left to side.

In this way we leave the margin.

Padding means that compressing the content internally again to give inside space to the content, we make use of the padding property.

Like it has been shown here, CSS padding property is used to give space between the content we make use of the padding property. For example, if we see the heading tags use here, our content is starting from the left-hand side border, if I want space between the content and the left border for that I can make use of padding, if I want to increase the space between top and content, at that time I will make use of padding.

Same, if I want space between content and bottom border, in that case also I will make use of padding.

So, what does padding do? It gives us some space between the border and the content.

Next, it is different from CSS margin.

How is it different? CSS margin defines this space around elements.

That means around the element it declares the space, margin tag.

But what does padding do? Padding declares space internally.

 If the margin doesn't get the colour, in the current example we had given the colour to the background.

So, when we gave the margin, we could see the green colour.

When we give the padding whatever is the colour of our content, for example the colour of h1, that will be set as our background colour.

Next, we are also getting four values.

Top, bottom, left, right.

For this also we have got a shorthand property available.

In the same way as margin works, we will check padding as well.

Let's say for our padding we will take a new h1, this heading tag is to check padding property, save.

So here we are getting the same as the h1.

Now, if you want to leave some space from the left side.

Let's say I give one class to h1, class, check, padding.

Copy, Okay, check padding.

So, I want space from the left.

So, I will give padding from the left, let’s say I will give 50 pixels for example.

So, you can see here that between my content 50 pixels space is left.

Now, I want that there should be some space between my content and top as well.

So, I will add here padding top 50 pixels, so from top 50-pixel space, my content is starting.

I want that from right also there should be some space, let’s say padding right 20 pixels.

So, from the right border till here, I have left 20 pixels of space.

I want there to be some space from down.

So let’s say padding from bottom 35 pixels, so we have left 50, 20, 25 then 35.

We have left some space like this, so this is the individual padding that we have given.

Same as we have got margin like we had given in four values, if we want to give the margin in the same way even that we can give.

Let's say here will come padding, first is top.

So, let's say 50 pixels, then comes right so let's say 20 pixels, then comes bottom so let's say 30 pixels, then comes left.

So, let's say 40 pixels.

So, we have here, top, right, bottom, left, so the clockwise direction that we had considered in the margin.

The same direction will be considered in our padding as well.

We will save it and reload.

There is a slight change here.

50, then comes 20, 30 and then comes 40.

If you have to write it in one line, padding top,  padding left, padding right, padding bottom.

If we can give it individually, in the same way we can give it in shorthand, just by adding padding.

Some like it was in margin, instead of four we can give padding in 2 values.

So, it's like a padding, 50-pixel 20 pixel.

So, the first value indicates top and bottom.

Second value indicates left and right.

So, this was our top, bottom 50 left right 20.

So this is our padding into 2 values.

If we want to give it in one value that also is possible, let's say we will give 50 px, which means top right, bottom left.

In every case 50-pixel space would be occupied.

This is our padding in every direction, 50 pixels.

So, this was our padding to give the content internal space, to give space between borders and content.

How separate we want to keep the content from the outside element, for that we use margin.

If we consider margin and padding in short or explain it.

Margin occupies space from other relevant and padding occupies inside, the space that content wants from the borders.

How much space do people occupy from the body? Like we have seen the padding it is given in pixels.

Same way we can give it in percentage.

Padding is also allowed to give in percentage.

Let's say if I take 10% padding, reload.

So, this is values in percentage and if I want to give it the same, auto.

It is like, padding, here if I don’t give any padding.

So, this is my content.

Now, I will give padding auto.

Let's say if that makes any difference.

There is no difference.

We will see in our slide.

In padding the values can be given only in percentage, pixels, pt and in centimetre.

Auto is not supported by padding.

Auto is supported by margin but not padding.

This is the difference in padding and margin.

So, this was our padding property.

How we can give the padding and how we can give the margin.

So, the first one that we had seen today was about line height.

In between the content and lines, how much height is needed.

The second one that we had seen was about the margin.

What margin does with the outside elements, how much space we require that it occupies, means it defines how much current element should be away from the other elements.

What padding defines? Content, inside content and the border how much space is there between those.

So, these were the three very important topics of today.

Line height, margin and padding, from this margin and padding are the part of CSS box model.

In our next segment we will see about CSS filters.

This we normally use when we work with graphics or colours.

How will we use the filters that we will see in the next topic.

 Guys, the margin padding and line height which has been taught today.

I request you that you check it by performing the practical on your own.

If you successfully run the practical, it is really well and good.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to rectify your issues at the earliest and revert to you.