Tailwind Essentials: Padding

CSS Tailwind CSS
Transcript

English (Auto-generated)

uh spacing in the Children. So what we're actually going to do first of all, we do not need all this data because we've done a lot here so I think we can delete them and I'm just deleting them for now and like that I just simply deleted. Okay. I cleared everything now. We're going to talk about the spacing for now. So let's just create a simple DEv. I mean like that I just created a div and just save it. Okay. We got the div here. Now in this is what I'm gonna do is adding first of all some class and making it a grid. Okay. And then the grid call, let's say I just wanna call to and inside this. I'm going inside and I'm creating a new div div and then here the class name and then here I'm writing, I'm writing nothing for now. I'm just writing something inside the dibs the between the starting and ending tech and I'm writing something like, you know, hey, we are learning kill wind with next Js. Just clarifying that. Okay. We're using next days because it's, you know, I think this is so far so amazing. Um framework um based on the react so I I use the next phase but you can use uh the tailwind with many other Js frameworks though. So here I am going to write something like, you know, I'm writing um let's say B G PG. Mm hmm Rose I'm going with the 600 and I'm saving it and I'm going to the browser back actually before going to the browser. I need to make a text rose 100 and saving and going to the browser back and now you can see that the texture is here and now we can do something we want to. Okay so first of all we're gonna go with the with the with the padding in this pacing because we're going to talk about this pacing specifically. So there is padding. So there are some possible options we can go with in the padding like you know you can put the P with the zero but absolutely I'm not gonna go with the Pe and the zero but there are certainly values like you know you can put values up to 96 96 values. So I'm going back there and uh here I'm adding the P. What's the mean of the P. Actually when you write P you're talking about the padding and when you write something like you know padding? 10. So you're exactly talking about you know The padding. 10 pixels padding. Anyway I'm going there back and actually I made the padding. 10. I'm going there and I got the padding hole around and that's a lot of padding. Actually this is not 10 pixel padding. Actually this is the padding or the values here are in the Rs the R. E. M. Is a perfect you know uh the perfect unit when you're creating the you know The flexible or you can say the responsive web design. So this is the 10 here it is. The 10 is 2.5 R. E. M. Anyways if I make it p. five save it now it would be much smaller. But you can see that we just applied the padding. Now you have the option. Maybe you just want the padding from the top. So you can write P. T. Now you're going to get the padding from the top only. Okay, similarly if you maybe have the you maybe need the padding from the you know the left side. So you're right pl pl means the left padding. You got the padding from the left side. You can also have the padding from the right side. Cpr but pr won't be visible here because you know there is no data after that. So I mean you can suppose it and PB absolutely the the padding bottom. So we got the bottom padding but you also can, you know the T. R. B. L. So this is a simple, you know in one direction. But maybe you want the padding in two directions. So you can go with the py py means the Y axis, the top and the bottom. So here you can see that the padding at the top and the padding at the bottom but there is no padding at the left or right side if you want that you can write the P X. The X. Means that you know what the X. X. S. So now there is padding here, they're absolutely padding here but there is no data so we just cannot see that. And there is a there is no padding in the Y axis. So we just got it and I think this is awesome. I mean it works so that's how you can apply the padding. One more thing if you are applying the padding, you know if you go with the P. So it's absolutely gonna apply the padding on, throw out the hole that I'm in X. Y. Both both axes. Okay. But maybe you are just we just want the padding at the top you know that. But with the top you do not want the padding from the bottom but maybe you want the padding from the right side so you right left side. I mean pl and P. L. Five so you're gonna get the padding from the left hand top. So go there, you can see that there is padding, you can see that and there is padding at the top. So it is you know sometimes you're dealing with the odds and also maybe you want the padding from the top as 50 which is too much but let's just see that. Okay. It is not liable why it is not a pliable anyway that's right and for now go there and yeah it is applied mm hmm mm hmm mm hmm mm hmm. Okay. Yeah. Okay. Actually the 36 and then 40 you can see that there is a gap. So the 50 possibly is not available because you can see that the 48 and the 52. So there is no 50 but 52 or the 48 value. You can apply the 52 or the 48 just For the sake. Oh sorry not 152 are obviously b. and then go there and then go there. You can see that there is a big padding here but there is only pl five so that's how you can play with it. We can have multiple values. Pl you know maybe the pr this one the 10 and the P. B. Wants something like you know if I go there back and if I go up come on here it is you maybe want the you know eight. Let's say you want the PB eight so save it and then go to the browser and then here you got the P. B. H. The P. B. 52. The PB I think five so 52 5 and 10. And then the pr is not visible for us because there is no content after that. So we just cannot see that. But there is the pr two and the P. B. Is eight. I mean you know the padding bottom. So I think we've played enough with the padding, similar content. Uh Similarly you can you just supply things um you can see that the further, but we already have covered all now. Similarly, you can go with the margin, and but we're going to talk about the margin in the next cast until then stay tuned.
76 Views 0 Likes 0 Comments

We work with the tailwind principles to manipulate padding.

Comment
Leave a comment (supports markdown format)