Margin

[00:00:00]
>> Kevin Powell: The last thing after border is margin. So margin 50 pixels, and I'm going to add empty space. You saw it moved over a little bit. Let's make this a little bit bigger, and it's going to move over even more, so I'm actually adding empty space. The dev tools are a really nice way to visualize the box. So if I select the element, we've got to find it, the paragraph, and I go over to the computed, you'd think it'd be layout, but it's not layout, it's in the computed tab.

[00:00:30]
You can see your box model there. So I can see here, if I hover on top, it shows me the content-box, it shows me the padding box, the border-box, and finally the margin outside. I'm not going to go through all the stuff for margin. Works exactly the same way that padding does. The only difference between margin and padding, margin is empty space with no background, padding is empty space with background, and the order is always content, padding, border, margin.

[00:00:56]
People sometimes mix up padding and margin, try one, if it's the wrong one, try the other one. There's no harm in doing that whatsoever. Eventually you'll start getting used to it, and it won't cause you any more angst or anything like that. Do the specific units for padding or margin or even some of the font settings typically come from designers, or is it left to developers to figure those out? That's a really good question.

[00:01:20]
Most of the time you're going to have a design and you're trying to match the design. Sometimes you'll be doing a personal project, then it's all up to you. It does make it easier when those sizes are coming for design and you don't have to stress about it. People sometimes when they get into CSS, they feel like they need to also be good at design or they're like, why do my things all look so ugly, even though I'm following all these good practices, and it's because creating a design through CSS is not the same skill set as being a good designer.

[00:01:48]
There's very different skill sets that are there. So yeah, it's one of those things that the more you do, the better you might get at design just because you're building, if you keep building nice designs that designers are giving you, you might learn a little bit about best practices along the way. And I would just say my biggest rule of thumb, if you're not a designer, you're working on personal projects for things like margin and padding, go way bigger than what you think you should need and slowly reduce it until it looks good.

[00:02:16]
If you start small, people always end up with not enough space on things and then everything's just really cramped together. Put lots of white space, space things out, way too much. OK, I can reduce that, and then eventually slowly reduce it and you'll find something that looks good. But yeah, it's one of those things that early on it can definitely be difficult and just look for simple designs to try and recreate sometimes is the best way to go about it.

[00:02:37]
I sort of lied to you a little bit when I said margins are the same as padding. The property and values work the same, and we have the same shorthands, we apply them in the same ways. It's empty space. They're both creating space and all of that. There are 3 key differences, or 2 I guess, but the first one is an important one. The body of every website by default from the browser is getting an 8 pixel margin all around it, which is just keeping things from touching the edges.

[00:03:08]
You can also use auto margins to center things, and finally margins can collapse into one another, and collapsing margins is an issue that developers have had for a long time, it can be a little bit confusing. We're going to try and make sense of it in this next lesson though. So now that we understand about the box model, there's some stuff that we can improve in our page. I've come in with a new updated design where we've added some background colors and some sizes and some other things along the way here.

[00:03:33]
For this one, we will have to make some changes to the HTML for the structure here. I think it won't be too bad. Once again, if you are using the GitHub repo, you'll be able to find the starting files for that if you haven't been following along so far or if you got behind, or if you want, you can also just copy the starting code directly from here and the CSS to paste into your file if you want to be at the same place that I was at.

[00:03:55]
The repo does include the images. If you're getting it from here, the only thing is it won't include the image that we've been using. So, new colors, we have one new color and we have the white because we actually need to use white as a background color, and I have this buttony thing that I'm going to be bringing in with a brighter color here. So I'm going to start by copying this and then jumping on over to VS Code, we have a new color, so the first thing I'm going to do is add it to my colors.

[00:04:21]
It's a brighter version of the yellow, which leads to a small problem, but not a big one. So I have another color accent now, and I have to figure out what to call them. They're very similar. You can probably tell there is a little difference in the icons here, and the lightness value of this one's a little bit higher, so it's a brighter color. I'm going to use the same system I've been using so far with the numbering.

[00:04:47]
400 is my base. This one's lighter, so I'm going to use 300. It's up to you if you want to come up with a different name. It doesn't mean that here where I use that accent-color, I do just need to make sure that I actually have it declared. So is it only there? Maybe it was only there, oh, the link also had it. Oh, I made a mistake somewhere along the way. We've made a change and when I changed it back, I put the wrong color, so that's good, accent 400, so we have the correct color on our links now.