HTML & CSS for Absolute Beginners: Box Model - Margin

Key Takeaways

we have one more part of the Box model that I want to talk about which is one that came up in an earlier lesson which is margins you can see I have a little bit on my uh sections right now and to highlight how margins work we're going to come back and add a background I'm going to do a black on here with a color of white uh and hit save and we can see there are my paragraphs and right now the black is just on the content box margins are part of the Box model like we've been talking about so the content box has the black background if I need more background what do I do I come in with a bit of padding so padding on all four sides will say 20 pixels and now when I refresh I get 20 pixels of padding around each one of those so the box so I have the size of the Box plus 20 in each Direction and then on top of that we can have our border so border 10 pixels dotted yellow and we get a nice little dot that's adding to that total size so content box padding box border box and the last part of the Box model that we've just sort of talked about is the margin and so margin let's do 40 pixels for now refresh and now we've added more space around there and margins and padding are basically the same thing with the one very big difference being that margins are empty space that don't include the background color whereas paddings are empty space that include the background color and it's one of those things that a lot of beginners mix up and they go I don't remember which one I need try one and if it was the wrong one you switch to the other one it's doesn't take long and as long as you remember both of them add empty space you're good and then eventually because you're going to be doing this a lot and using both of these properties quite often you're going to start remembering which one is which but padding adds empty space with your background color margin adds empty space without your background color and it works the short hand the long hand everything with it works exactly the same way as padding so I'm not going to Deep dive it too much in this lesson but let's just come here and say I did 100 pixels and say 100 pixels 50 pixels and 10 pixels is the same way we were doing it before we have 40 on the top 100 on the right side here then we have 50 on the bottom and then we only have 10 there if I make this 10 go up to 100 well now I have 100 on that side and 100 on this side but doing that well that's kind of redundant cuz this one and this one are the same so we could do this instead 40 on the top 100 on the side 50 on the bottom and then because we didn't do a last declaration the 100 is the left and the right and then of course we can take this one off same way 40 top 40 top and bottom 100 left and 100 right and if we wanted to we could do a zero here and get them all to stick together and it looks really terrible and we saw before we have a margin block so margin block is your top and bottom axis it's what's currently adding the space between our sections and then we also have our uh inline as well so here if I did a margin block of say 30 pixels that would add 30 pixels on the top and the bottom of each one of my paragraphs and if I were to do a margin inline of 100 pixels then we're adding an empty space of 100 pixels on the left and the right side of them so uh again exactly the same way your padding works but just without any background colors on them