<p>I don't edit CSS very often, and almost every time I need to go and google the <a href="http://www.w3.org/TR/REC-CSS2/box.html" rel="noreferrer">CSS box model</a> to check whether <code>padding</code> is inside the <code>border</code> and <code>margin</code> outside, or vice versa.  (Just checked again and <code>padding</code> is inside).</p>

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

[{'answer_id': 32673, 'author': 'Niyaz', 'author_id': 184, 'author_profile': 'https://Stackoverflow.com/users/184', 'pm_score': 3, 'selected': False, 'text': '<p>pin - P is in</p>\n'}, {'answer_id': 32674, 'author': 'Peter Hilton', 'author_id': 2670, 'author_profile': 'https://Stackoverflow.com/users/2670', 'pm_score': 2, 'selected': False, 'text': '<p>Print the diagram from the <a href="http://www.w3.org/TR/CSS2/box.html#box-dimensions" rel="nofollow noreferrer">Box Dimensions</a> section of the specification, and put it on the wall.</p>\n'}, {'answer_id': 32675, 'author': 'Chris Marasti-Georg', 'author_id': 96, 'author_profile': 'https://Stackoverflow.com/users/96', 'pm_score': 2, 'selected': False, 'text': '<p>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?</p>\n\n<p>Once you work in CSS enough, it\'ll become second nature to remember this.</p>\n'}, {'answer_id': 32680, 'author': 'RedWolves', 'author_id': 648, 'author_profile': 'https://Stackoverflow.com/users/648', 'pm_score': 2, 'selected': False, 'text': '<p>use firebug to help you see.</p>\n'}, {'answer_id': 32692, 'author': 'Simon Keep', 'author_id': 1127460, 'author_profile': 'https://Stackoverflow.com/users/1127460', 'pm_score': 8, 'selected': True, 'text': '<p>When working with CSS finally drives you mad the padded cell that they will put you in has the padding on the <em>inside</em> of the walls.</p>\n'}, {'answer_id': 32696, 'author': 'Ross', 'author_id': 2025, 'author_profile': 'https://Stackoverflow.com/users/2025', 'pm_score': 2, 'selected': False, 'text': "<p>I've just learnt it over time - the box model is fairly simple but the main reason people find it hard is because <code>body</code> doesn't visibly break the model.</p>\n\n<p>Really, if you give <code>body</code> a margin and a background you should see it surrounded by a white strip. However this isn't the case - <code>body</code>'s padding is the same as margin. This establishes a few incorrect things about the box model.</p>\n\n<p>I usually think about it like this: </p>\n\n<ul>\n<li>margin = spacing around the box; </li>\n<li>border = the edge of the box; </li>\n<li>padding = space inside the box.</li>\n</ul>\n"}, {'answer_id': 32726, 'author': 'Tim', 'author_id': 1970, 'author_profile': 'https://Stackoverflow.com/users/1970', 'pm_score': 1, 'selected': False, 'text': "<p>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.</p>\n\n<p>You can add to it as you grow in knowledge and apply it to various different browsers to see how various things behave.</p>\n\n<p>You'll also be able to add in comments or examples about other hard to remember stuff or stuff that is counter intuitive.</p>\n"}, {'answer_id': 230100, 'author': 'John Dunagan', 'author_id': 28939, 'author_profile': 'https://Stackoverflow.com/users/28939', 'pm_score': 1, 'selected': False, 'text': "<p>Add border, even just temporarily. As you play with the numbers, you'll see the difference.</p>\n\n<p>In fact, temporary borders around elements is a helpful way to work, such that you can see why floats are dropping, etc.</p>\n"}, {'answer_id': 230225, 'author': 'Brad', 'author_id': 26130, 'author_profile': 'https://Stackoverflow.com/users/26130', 'pm_score': 1, 'selected': False, 'text': '<p>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.</p>\n'}, {'answer_id': 230271, 'author': 'Mr Scratch', 'author_id': 30856, 'author_profile': 'https://Stackoverflow.com/users/30856', 'pm_score': 3, 'selected': False, 'text': "<p>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.</p>\n"}, {'answer_id': 2519477, 'author': 'Greg Hluska', 'author_id': 287328, 'author_profile': 'https://Stackoverflow.com/users/287328', 'pm_score': 2, 'selected': False, 'text': '<p>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.</p>\n\n<p>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...;-)</p>\n'}, {'answer_id': 8156991, 'author': 'Jacek Ambroziak', 'author_id': 813140, 'author_profile': 'https://Stackoverflow.com/users/813140', 'pm_score': 1, 'selected': False, 'text': "<p>PAdding is a PArt of an element's PAinting: it extends the element's <strong>background</strong>. 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 <strong>margin</strong> 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.</p>\n"}, {'answer_id': 21563684, 'author': 'user3272652', 'author_id': 3272652, 'author_profile': 'https://Stackoverflow.com/users/3272652', 'pm_score': 2, 'selected': False, 'text': "<p>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.</p>\n"}, {'answer_id': 21568555, 'author': 'user1561245', 'author_id': 1561245, 'author_profile': 'https://Stackoverflow.com/users/1561245', 'pm_score': -1, 'selected': False, 'text': '<p>Margin:When you want move the block.\nPadding: When you want move the items within a block.</p>\n'}, {'answer_id': 38371218, 'author': 'Ajay Gupta', 'author_id': 2663073, 'author_profile': 'https://Stackoverflow.com/users/2663073', 'pm_score': 0, 'selected': False, 'text': '<p>Instead of ask again and again to google you just use inspector window. In that style tab and scroll down to bottom you can see like this.</p>\n\n<p><a href="https://i.stack.imgur.com/7fR9w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7fR9w.png" alt="enter image description here"></a></p>\n'}]
['https://Stackoverflow.com/questions/32668', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3189/']