How to remember in CSS that margin is outside the border, and padding inside [closed]

Answer 1

Tim Saunders gave some excellent advice - when I first got started with CSS, I made a point of building a good, fully commented base stylesheet. That stylesheet has changed many times and remains a terrific resource.

However, when I ran into my own box model problems, I started using 'Mo Pi'. As in, "I'm not fat enough, I need to eat mo pi." Strange, but it worked for me. Of course, I put on twenty pounds while learning CSS...;-)

Answer 2

I know this is an answer to your question, but more of a tip. Whenever I am dealing with margin and padding, I will add a border around the part you are working with, then from there, it shows me the room I have to work with. When I am all set, I remove the border.

Answer 3

Margin:When you want move the block. Padding: When you want move the items within a block.

Answer 4

pin - P is in

Answer 5

Add border, even just temporarily. As you play with the numbers, you'll see the difference.

In fact, temporary borders around elements is a helpful way to work, such that you can see why floats are dropping, etc.

Answer 6

Create yourself a commented base stylesheet which you can use as a template whenever you need to create a new site or edit an existing site.

You can add to it as you grow in knowledge and apply it to various different browsers to see how various things behave.

You'll also be able to add in comments or examples about other hard to remember stuff or stuff that is counter intuitive.