Today we are going to discuss about the padding How can you use or how can you define your padding to your element or on your element. So, first of all you have learned how can you use your margins make sure margin always works outside of the border are all sort of element parcels This is the border of the element and you are adding some space outside of the element. So this is the opposite that means this element held outside value this okay. So this is a margin. How padding is worth. Basically, in the CSS heading properties are used to generate a space around an element or content.
If you are using or inside of the orders for suppose this is the border. If you are using the heading, that means you are saying add some space inside of the element that means inside so this is your inside. So how can you do that, first of all, I need to add the padding to this. So this is our first element. So I have to call this class I have already called my class, then I have to use a party heading but you have to define which padding you are using padding top right, left or bottom I'm saying I need to add the padding on the top. That's why I need to call the padding and the top column and I'm saying 20 pixel.
Go to your page refresh the page. So now as you can see, you are adding the space inside of the element. So as you can see, this is your element. This is your Inside place of your element for if you are adding the padding right, you can add the padding right property And the values in pixels, which your page refresh the page because you have a lot of value, right sides. That's why it's not affecting if you are using left. So as you can see, it's fine working.
And if you want to add the heading, part and property, you need to add the value also in pixel. Go to save your file, go to your page, refresh the file. So now as you can see, you are adding the padding 40 pixel to this element in this way you're creating was but if you are using the padding individually side, so how can you do that? First of all I'm saying adding just try to make sure I'm not losing the position is the bottom edge of it. Just using the padding, and I'm saying add the padding from the 20 pixel pop. I'm saying 10 pixels, and I'm saying 40 pixels, and I'm saying it pixel, that means you have to add a semicolon.
That means I'm saying, and that 20 pixels from the top and the 10 pixel from the right, and the 14 pixel from the bottom at the 20 pixel from the right or left. So it was like you go to your page, refresh the page. So now as you can see, it's working fine. So in this way, you can define your padding for your element. Or suppose if you have a div if you have a div, and I'm saying, live, sorry, it's not a class. It's an element.
So that's why I have to say that element. I'm saying big round. Right or background color, red. Okay, I'm defining some elements inside the div. So fill up here. It's not currently a theory.
I'm saying, This is why paragraph one, I need to add the control the refresh. So now you can see it's showing one and the day, so that's why I'm saying, okay, refresh the page. It's working like this. If you are adding the padding to your table, how can you do that? I'm saying, padding, add the padding, 10 exam, and exam. And if you refresh the page, now you can see it's working fine.
You can also use a percentage or suppose 10% person Refresh the page. And you can also use 40%. Okay, I'm using person on call person. So this person, this person goes up refresh the page. Now as you can see, you can also add adding the person you can also use a person to your margin and you can also use the person to your text while working on the vehicle. Okay, so this way you can use a parody.
So in the next lecture, we are going to cover the width and the height in the CSS