Web design Track Styling Nav bar question (padding and margins)

Craig,

The box model is something that a lot of people struggle with when they're first starting out, so don't worry: you're in good company! That said, one way to simplify and help remember what means what when it comes to all the different terms and how they apply to things is to relate it to a real world object; since these properties together are known as the "box" model, let's think of it as a package that we're shipping to someone:

Firstly, you have your container, or the "box" itself. In web development, this will be represented by any "block-level" element, such as a div or a nav (as is the case in your particular situation). In our real-world package-shipping scenario, the box is represented by a literal cardboard box.

Inside that box, we have a precious item; perhaps an expensive, fragile statue, glasses and plates, or anything else that you might not want to slam up against the sides of the box (those items are the inner-most portion of the box model, the "content").

To protect the content from the box, we could wrap the items in bubble wrap, or fill the box with packing peanuts. Whichever method we use to pad the precious contents, it will be known as just that: "padding".

Now, we're going to take this box, filled with precious content that is protected from the hard edges of the box by soft, squishy padding, and we'll put it into the delivery truck (the website). But, perhaps whatever content we have inside our box is so insanely fragile or important to us that, even though we have taken the steps to line the insides with padding for protection, we don't want to risk anything else bumping up against the box at all while in transit, just to be extra extra careful. To achieve this, we could ask that the box be given some space around it that nothing else is touching; this would be called the "margin" around the box.

All those things together, but in the actual box model order (from the very outside to the very inside):

1) The truck = the WEBSITE

2) The space around your box = the MARGIN

2a) Not discussed, but the border lines the outside of the box (simple enough, it is the "BORDER")

3) The box = the CONTAINER (div, nav, etc.)

4) The packing peanuts or bubble wrap inside the box = the PADDING

5) The precious cargo inside the box that is protected by packing peanuts or bubble wrap = the CONTENT

The reason you would apply these concepts in a website could vary between anything from necessity for the user experience (applying margin between two containers so that people can clearly tell them apart from one another, or applying padding inside a container so that the paragraph content within doesn't smash up against the walls) to simple aesthetic design choices (adding a lot of extra padding inside a nav link or a button, for example, can help it stand out and flow better with other design aspects).

Hopefully this can serve to make things a little more clear as to what each piece of the box model represents! As always, things will become more clear with practice, and before you know it, it'll just click, and that'll be that!

Happy coding!

Erik