navigation styling:margin and padding

I can tell you what helped me conceptualize it, and maybe that will help.

So imagine the web page as space. Now each element in the HTML is essentially a rectangular box by default (you can change the shape but ignore that for now). Ok so you have looked that the box model. Lets work from the inside out. We will start with the content area.

The content area is, well, the content. The text in a <p> element. The link in an <a> element. Whatever we throw into a <div> or a <span>.

Next we have padding. This creates space around the content between the content and the border, or edge of the rectangular box. You can add or remove padding to create space INSIDE the box. It does not necessarily change the position of the box, though it can if there is not enough room for the padding.

Now we have the border. The border is just the edge of the box. It can be visible by adding a border property, or invisible, but it exists either way. Anything inside the border will have the same background property (color, image, etc).

Finally, and perhaps the most confusing at first, is the margin. This is the space BETWEEN the boxes. The space between the rectangular boxes, and separates them from each other. The more margin, the more space between boxes. Remove the margins and the box's borders will touch each other. Set a negative margin and now we can pull boxes over each other.

Take a look at your box model again. Make some elements html. Give everything a border style so you can see the edges. Now start targeting them and playing with margins and padding. You will start to get it.

The top margin would prevent margin collapsing (google that it is important to understand) as well as create space above the selected element. The padding value adds space around the content inside the selected element, in this case at the top and bottom. Loom up the CSS box model. Once you understand the box model all of this stuff is a lot easier to understand.

Welcome to coding haha. It happens to us all.