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

问题

I don't edit CSS very often, and almost every time I need to go and google the CSS box model to check whether padding is inside the border and margin outside, or vice versa. (Just checked again and padding is inside).

Does anyone have a good way of remembering this? A little mnemonic, a good explanation as to why the names are that way round ...

回答1:

When working with CSS finally drives you mad the padded cell that they will put you in has the padding on the inside of the walls.

回答2:

pin - P is in

回答3:

You are using a box. If you were putting something in a box you would put some padding inside to make sure it didn't smack against the sides. Margin would then be the other thing.

回答4:

Print the diagram from the Box Dimensions section of the specification, and put it on the wall.

回答5:

To me, "padding" just sounds more inner than "margin". Perhaps thinking about the printed page would help? Margins are areas on the far outside - generally, you cannot even print to the edge - they are unmarkable. Within those margins, the content could be padded to provide an extra barrier between the content and the margin?

Once you work in CSS enough, it'll become second nature to remember this.

回答6:

Padding is usually used inside. Either on the interior of a wall or a delivery box, that's simple. And if padding is inside, then margin is outside. Shouldn't be too hard.

回答7:

I've just learnt it over time - the box model is fairly simple but the main reason people find it hard is because body doesn't visibly break the model.

Really, if you give body a margin and a background you should see it surrounded by a white strip. However this isn't the case - body's padding is the same as margin. This establishes a few incorrect things about the box model.

I usually think about it like this:

margin = spacing around the box;
border = the edge of the box;
padding = space inside the box.

回答8:

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...;-)

回答9:

use firebug to help you see.

回答10:

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.

回答11:

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.

回答12:

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.

回答13:

PAdding is a PArt of an element's PAinting: it extends the element's background. It makes sense to think of a pair element+padding as sharing a common background. Padding is analogous to the painting's canvas: the bigger the padding, the bigger the canvas and therefore background. Border (the painting's frame) would go around that pair. And margin will separate paintings on the gallery wall. Thinking about the concept of object background helps glue the pair object+padding together. The usual explanations of what is inside vs outside do not stick to memory: after a while everybody gets back to the original confusion. Remember also that margins are vertically collapsible and padding is not.