Margin Shorthand

[00:00:00]
>> Jen Kramer: See my picture doesn't align over here on the left anymore. And now I've got some weird space on the top, the text sort of starts before the picture
>> Speaker 2: No margin on the top it looks like.
>> Jen Kramer: We actually don't want any margin on the top, do we?

[00:00:13]
Okay, so probably where do we want this margin applied for real? What sides of picture do we want the margin to be put on? Yeah.
>> Speaker 3: The right.
>> Jen Kramer: We want it on the right and anywhere else?
>> Speaker 2: The bottom.
>> Jen Kramer: Probably the bottom, the right and the bottom, and we want the top and the left to be shoved up in the corner here, okay.

[00:00:35]
So now there you can write this in the following way. You could say margin right. One rem and you can say margin-bottom, one rem. Right? You can go on and on and on like that. That's one way of doing it.
>> Jen Kramer: Okay, the other way of doing it is to use something called shorthand, okay?

[00:01:07]
And this is something you're gonna see a lot, a lot, a lot in code. And the way that we're gonna do this, is we're gonna use the margin property just as margin, but we're gonna put in four numbers. Okay, and the four numbers we're gonna put in are this way.

[00:01:27]
TRBL, top, right, bottom, left, and if you remember that you will stay out of, trouble.
>> Jen Kramer: [LAUGH] Okay, so the first number on margin here is going to be our top number, which is what what value? Zero. We don't want anything on the top. Our second number is going to be on the right.

[00:02:00]
We definitely want some margin there. Yeah. Okay, our third number is going to be on the bottom.
>> Jen Kramer: One rem there, and our fourth number is on the left, zero.
>> Jen Kramer: So you see how I wrote that, TRBL. And if you take a look at your notes here, it'll be, I have a little diagram here for you.

[00:02:31]
So as you write these, this can be true for margin or padding. The numbers work the same way. Some people like to think of this as the hands of a clock. So we start at 12 o'clock or the top of the box and we go around in a clockwise manner.

[00:02:46]
That never worked for me I don't know why. Okay. I rather remember the acronym. And in fact when you hear me teach you'll hear me mutter this acronym all the time as I start writing numbers t r b o, because I don't know why I can't remember what order these numbers go in I just remember the acronym.

[00:03:03]
So, top right bottom left, that's the order of the numbers. Okay? Your four numbers can be and I put it here with four totally different units of measure. They don't all have to be the same units of measure. You can mix them up if you wish. Okay. 10% or 10 pixels on the top, two M's on the right 3% on the bottom, 2rems on the left.

[00:03:27]
I don't know why you do that, but you can, you're right, it's legal. So hopefully that helps some, for those four numbers. There's some more here in the shorthand, we'll probably be covering more about shorthand, and exactly how shorthand works. But there's plenty of reading here on your page as well.

[00:03:46]
So you can take a look at how that works, okay?
>> Jen Kramer: Any questions on that. So we've floated our picture, and we have a margin going around it and now it looks much better. Not perfect, but better.