Hello guys, I am Shahzad and welcome to lesson number 12. Today's we are going to discuss about the pad padding, and also the margin. How can you use the padding or margin or how can you add the padding or margins in a row column or any element. So before doing this, I'm going to create a new age so we can work on that. I'm saying it's a padding and margin. Now, probably the space and open as a front end editor.

So this is the front end editor. You can also work by using the back end. Now you know very well that you have to define your row before adding any column. So this is the one column. Now click on this one, this one I need this layout. That means six column, six six column for a particular row.

So these are the two columns. Now I'm saying I define the click on the design option. Just click on the background color, I'm saying I'm going to use the red color. So this is a red color. Now I need to define the test. Copy this text.

Now, fine. So clone this one, this element Greg's element from the left column to the right column. Okay, fine. Now you have two elements in both column, left and right. Now, if you click on this Row, row, that means I'm editing the row. Now, click on the design options.

You have margin sections, you have padding sections, and you also have the bar border sections. It's a top right, left and bottom. I'm going to use the 20 from the top sorry 50 from the top 5050 5050 That means I'm going to use the 5050. Top, right, bottom and left. So this is a margin, I'm going to use a mouse click on this one and close this first. As you can see, I have just used the margin.

Okay, now, the margin I'm using in the row, click on this one. Now you don't need to use the pixel because visual composer automatically add the PX for you. Okay, now, I'm saying now I need the padding, just click on this one, I'm seeing plenty from the top. Right, bottom left for the entire off, so you can see this is the entire row. You're adding the padding in the entire row, but you can also use the designs. Let's pose now just click on the column to the left Column just click on the Edit Column.

So design options you have same margin padding, you can also define your parents or margin for the separate columns. let suppose if you need the margin and the padding for the left column, you just need to define that padding or margin here. So I'm saying 50 from the top, right bottom and the left click on this one, this one, you can see now you are using the 50 padding for the left column. Okay, now, here, you can also use the padding margin for your element just click on the Edit element, you have the design option. And you also have the margin padding. Let's suppose you are you want to use the padding for this element, which is a text element.

Now design options and saying 20 2020 and now 20 You don't need to use the PDFs. Now, so we can see you have just used the padding for your element. So totally depend upon you. I personally recommend that you have to define a particular class or the ID and you have to call that class or ID by going or by adding just let me open this folder. Now I'm going to remove all the padding margin. We are using the padding margin here.

We also going to remove the padding here. Okay, fine. What happens now just click on the Customize section so you can easily add the CSS coding here. Now let's have all you want. Add the padding in the row, just click on the row, add it to the row. Now you have to define the class or ID, you can also define the ID here, you can also define the class, I'm going to use the class, I'm saying my class, just copy this class, save this element.

Now, I'm saying find this class and add the padding. Now, on the pixels, that means I'm saying padding from the top right, bottom and also the left, publish this one. So now if you open the page localhost, and now I'm seeing a component, I think there's some padding and margin page. Okay, this is the same page. Now as you can see, you have just used the padding by using the CSS customize this page. Click on this one.

So now as you can see if you use the 5050 so now as you can see you are using the 50 if you use a 20 painting for your role you can also use apparently padding for your row why we are defining the class or ID in the element and you are calling the class or ID here in the CSS sections. Because what happens if you open this one in a mobile device let's suppose you have you use the padding. So this is the inline styling you are using. So this is a padding you are saying 5050 5050 you are using the 50 padding in the row. So you are using the 50 save this one and now Open. OK, now fine.

Remove this one publish. Fetch the page. Now you're using the 50 padding, right click Inspect Element. Now as you can see, you have the party here. Okay, this is a parody and you are using the padding. Yeah.

There's a padding top padding right padding bottom padding left okay. If you define the class and you call that class here, you can also use the padding like this padding 40 pixel space 40 pixel or and also the facilities actually depend upon you this theme is using the second this theme, adding your CSS key and pair value in the styling. But mostly teams use the internal solid inline styling for a particular row or for a particular column. So that's why we we have to define the class or ID from the front end side and we have to call that class or ID on the customized CSS sections. So I hope you are enjoying this series. If you think we are doing good feel free to share our courses and also the video.

Thank you for watching.