Tailwind Essentials: Margin

CSS Tailwind CSS
Transcript

English (Auto-generated)

and we've already had a talk with with the padding already. So I've deleted the padding now. In the margins actually it is similar to the the the similar pattern or send texts we have for the padding we're going to apply for the margin but the margin you know the margin does a different thing you know you need to be a kind of um kind of CSS expert to understand that or at least you need to know you need to have basic understanding of how things works in these years. Is Anyway now we're gonna talk about the padding so I'm gonna go back there and I'm gonna I simply deleted that the previous data. I'm adding this space and then I'm writing the marginal the margin has has also has a few kinds the margin the M. X. M. Y. So let's just apply a few. I'm going there and implying the margin like em And I'm writing after the MI'm writing I'm only writing him for now and I'm writing 10 saving going to the browser. You can see that there is a space above. There is a space at the left side, right side. Sorry? Yeah this is left side. Anyway there is a space at the bottom and absolutely there would be any space at the left side. So the margin is applied. The only difference between the margin and the padding is the padding is actually uh puts a space within the the object or within the the element. But the padding and the margin does it outside of the uh the the the element. So this is the element. Previously, we were having the padding or spacing within the within this element, but now we're having it outside of the element, you know? So anyway, I mean the basic, this is a basic size of the margin margin and padding, you should have known that. So if I write PMt, you know, empty means I just want the margin from the top and if I write em, you know, a similar pattern, if I write M. L. So I would have the margin from the left side. And if I write M. R. M. R won't be visible here because um you know, because we don't have content at the right side anyway, but if I type MB absolutely, I'm gonna have the the margin at the bottom, so we're going to get it. We got it already. Okay, similarly, if I write M. Y. So absolutely, it's gonna apply, it's we're gonna get the the margin in y axis, the top and bottom. And you know that when I write mx, so there would be the margin at the left and right side. So we got it. Okay, we've already used the mx mx auto means, you know, this is the the margin, left and right. Auto. So this makes things centered. So absolutely it did. And now we can see that. So this is a simple logic of the margin and I think we just got it got it covered and I think it's pretty simple and pretty, you know, self explanatory. So you know, there is uh there is a thing that you also can apply the margin, uh you can apply em Otto MX Auto, m by auto, MTM, RMB or M. L. Auto. So you can apply that. And also you can Put the value of margin up to 96. But absolutely, the previous one is 80. So there is a difference. You need to, you you have to double check if maybe you're trying to put the 82 or 81 so that it won't work unless it is 80 or 96 or you know, Maybe a digit before the 80 is uh 72. So there are different values. Anyway, so this is the margin, we just had a discussion on in the next cast, we're gonna talk something else.
118 Views 0 Likes 0 Comments

We learn how to manipulate the margin using Tailwind.

Comment
Leave a comment (supports markdown format)