Today we are going to discuss about the margins. So what are sorry? What is the margin? And how can you use the margin? First of all, you have your one element, one single element if I'm creating another element with the same class, so you have same element, but I'm renaming my class or suppose second. So second in my class.
Now I'm calling this class with dot size you okay? At the same styling, is to refresh the page, you have two different types of paragraphs. So first of all, what is the margin? In the CSS margin properties are used to create the space around the elements made sure outside of the defined world First of all, if you want to add the margins on this elements from the top left, right, and bottom left, I'm saying add some spaces between them first of all, or add some space bottom of this element. So how can I do that? So, this is my first element and this is my first this is my second element, this is my second element.
Now I have to call this class. So I have already called so I need to write the margin here. So the syntax is margin and the bottom you are saying add some space from the bottom. I'm saying 50 pixels and 50 pixels, you always write your models which reason refresh the page. So now as you can see, you are adding the margin. The margin if I Saying add some margin from the top top and I'm saying add 50 pixels.
Go to your page refresh the page. Now as you can see, you're adding the margin from the top. You can also use the left and also use the right margin. How can you do that I'm saying the margin left hundred pixels refresh the page. Now as you can see, you are using the margin if I'm saying the same margin 50 gigs so as you can see, this is the 50% margin you are saying add some space outside of the element 50 pixel make sure outside of the element not inside. Okay, we will discuss about the inside which is a padding in our next lecture.
But for now, this is the margin. You can also use the margin right. Okay, I'm seeing 50 pizza. Refresh the page now as you can see, you have just Add in the margin, okay, outside of the limit. Okay. So now you are using the bottom top left right why you are repeating the same.
You can also use the single margin or the property I'm saying add 50 pixels from the top, add the 50 pixel from the left and the 50 pixels from the bottom add the 50 pixel from the left sorry, so this is top right, bottom left, it is a clockwise okay remove these lines refresh the page now as you can see it's working fine. If you are adding separately you have to use the position bottom up left right if you are adding if you are using just the margin, you can assign values like this. Okay, if I'm saying add zero pizza From the top ad zero pixel from the right at the 20 pixel from the bottom and add the fix it 50 pixel from the left. So go to your CSV file go to your page refresh the page. Now, as you can see, you have added these values on this element first element.
So in this way the part the margin was. So my next lecture we are going to cover the padding topics. So, thank you for watching.