Grow your business, income, & life.

Behind-the-scenes training to grow your business and generating income. Strategies and mindsets that work.

CSS3 Tutorial for Beginners: 22 CSS Box Model (Part 3) – Shorthand & Fast Code Writing

This is Sasha and welcome to another CSS training tutorial here so that way you know and understand how to edit your business website better. In today’s video, I want to talk about part 3 in the box model. I’m going to show you how to shorthand cut or do the short way of writing code for the margins, for the borders, and even the padding.

We’ll talk more about the border a little bit later but as far as the margin in the padding goes, I’m going to show you the shorthand method to writing those, that way you can see and understand the clockwise method and pattern. Let’s take a quick look.

Normally what you would do is if you take a look at this box that I have right here, you can it’s 520 pixels. I got a border of 3 pixels that’s black, line height of 1.65, 18 pixels on the font size and a font family of Arial. Either case, let’s just say I’m looking to increase the padding on this but I want the padding to be a little bit different. Here, if I want the padding and you can see there’s padding, padding right, padding bottom, padding left and padding top.

If I want the padding on the top to be let’s say 15 pixels, I could go ahead and add that property. As I save that, you’ll see the padding on top has changed. Now if I want padding left, okay, and let’s just say I want this one to be 35 pixels, okay, so I could go ahead and add that property right there and you’ll the 35 here come up in just one second. There we go, I had to add that hyphen in there.

You can see that’s really starting to take shape. Okay, I have 15 pixels. I have 35 pixels. If I want padding on the bottom right here, bottom, I can go ahead and add that and let’s just say I want the biggest padding right there. I’ll do 66 and again you’ll see. We have 15, 35, 66 and if I wanted to add a right padding, I could do that also but you can’t really see it because the box will be a little bit too big. Let me compress this box and we’ll go to let’s say at 220 in size.

You can see there’s no padding on the right. Let’s just say I want a padding on the right to be let’s just say 5 pixels, very small, okay? I went ahead and you can see how it bumped it out. If I want it to be 50, I could go ahead and do that. If I wanted it to be let’s say 500, I can go ahead and do that. You can see how that really ultimately works because I have a top, a left, a bottom and a right but writing out that code is not really as intuitive.

The other approach to write this code in the same way and the way that CSS normally works is it goes clockwise so it goes top then you do right then bottom then left. Now, this also works for the margin property as well. But here, let’s re-write this, okay, using the top, you’ll go 15 pixels, okay, you don’t need a comma or anything, you just add a space so then you do 500 pixels then we do 35 pixels and we need the bottom, 66 pixels, and then the left, it will be 35 pixels.

Ultimately this left should be on the bottom right there and that will be the same exact thing. You have 15, 500, you have 66 and you have 35. I’ll go ahead and delete this and you’ll see that by just doing this and you hit refresh nothing happens. But what I could do is start making changes here and if I did 200 on the right you can see the right is changed. If I do a 100 on right, the right is changed.

If I do the bottom and I make it only 15, I could go that route, I could do 25 on the left. If you do only two of these, okay, so here’s another interesting example, this will be the top and bottom, the first two would be the top and bottom and the next two would be the left and the right. It’s taking the top and then it’s taking that right field, okay? Then it’s just duplicating over.

We have 15 on the top and the bottom and a 100 on the left and the right, okay? If I do 200, okay, watch what happens, you’ll see there’s 200 on the left and right. Here if I do 35, it’s on the top and bottom, okay? It allows you to shorthand it that way as well. That’s a nice way of doing it.

You can do the same thing with the margin. Let’s say if I want just 55 pixels all the way around, I can just do 55 and it’ll be 55 everywhere, top, right, bottom and left, okay? If I want 55 on the top and bottom but I want only 10 on the left and right, I just do it like that. I just do 55 and 10.

If I want 55, 10, let’s say 25 and 35, I want things different then I could go ahead and do something like that. If I want to just move or fix the left side and I want it a little bit, you know, away from that left area, I’ll go ahead and add more margin on that left side, okay?

If I want a little more on the top part, I just add a little more on the top and there you can see that box shifting and moving around.

Ultimately that’s how you go about doing the padding and the margin as far as shorthand cutting it and again remember it’s clockwise so top, right, bottom, left and that’s how it works and you want to make sure that you input those properly.

If you only do two of them, you know, then it’ll do the top and the right and then I’ll duplicate it on the other side. If here you do let’s say auto to align the margins, you can align it right in the center, just kind of how we talked about it in the past.

If you do a 120 pixels width, keep in mind that 120 is the width initially plus you have your padding plus you have you have your margin, okay? In this context, this box is a 120 plus your padding on the right and the left. Up to that border, it’s really 200 plus 200, okay?

If you do it, it’s 200 plus 200 because that’s the right and the left plus you have the 120 so you have 400 plus 120 which actually gives you 520 in width on that box and then you have the margins over here on this side which are auto or automatic which gives it to you in the center. Hopefully that makes sense on the box model and that’s how you really shorthand cut and speed things up for the process of writing the CSS code in the padding and the margin.