Should I use margin or padding when formatting a text?

Question

I am designing some CSS for my site. I need to format (add some proper spacing between headers and paragraphs) a section of uniform text with headers and paragraphs on a single background. This can be done using either margin or padding property. I do understand the difference between these two in CSS. Also, there are a plenty of questions on SO regarding usage of these CSS properties:

However, no question shades the light on what property should be used for proper text formatting. Let's say I need to format the text like this:

Should I use margin or padding to control spacing between text elements (header and paragraphs)? What is recommended to use on <p> and <h..> tags? What is the common practice?

Here is what I came up with for now:

/* tiny reset */
html { font-size: 10px; }
html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }

p {
  font-family: 'Roboto', sans-serif;
  font-size: 1.6rem;
  line-height: 2.5rem;
  margin: 0.6rem 0 2.0rem 0;
  padding: 0 2px 4px 2px;
  width: 100%; /* Opera needs this */
  text-rendering: optimizeLegibility;
}

h1, h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  padding: 0 2px 4px 2px;
  text-rendering: optimizeLegibility;
}
h1 {
  font-size: 4.0rem;
  line-height: 4.0rem;
  margin: 2.6rem 0 2.0rem 0;
}
h2 {
  font-size: 3.2rem;
  line-height: 3.2rem;
  margin: 2.4rem 0 2.0rem 0;
}

.wrap {
  margin: 20px;
  padding: 20px;
  -webkit-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.3);
  box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.3);
}

<div class="wrap">
  <p>The last declaration of a block doesn't need to be terminated by a semi-colon, though it is often considered good style to do it as it prevents forgetting to add it when extending the block with another declaration.</p>

  <h2><strong>CSS statements</strong></h2>
  <p>If style sheets could only apply a declaration to each element of a Web page, they would be pretty useless. The real goal is to apply different declarations to different parts of the document.</p>
  <p>CSS allows this by associating conditions with declarations blocks. Each (valid) declaration block is preceded by a selector which is a condition selecting some elements of the page. The pair selector-declarations block is called a ruleset, or often simply a rule.</p>
  
</div> <!-- /wrap -->

It doesn't answer your question but it might be helpful looking at the following two links: http://www.w3schools.com/css/css_margin.asp and http://www.w3schools.com/css/css_padding.asp. From my experience, one main difference is that margin lets you use the auto to horizontally center the elements within a container. In terms of best practice, not sure what to say. — Erick, Apr 10 '16 at 02:01
Someone who down-voted and someone who voted for close - please explain me how should I improve the question! — ezpresso, Apr 10 '16 at 02:15
It should be obvious that there can be no one single, one-size-fits-all answer to this question. Try and think a little further – at some point, you might f.e. want to highlight one of those paragraphs with a background color. Now how far might you want that background color to stretch – should it just cover the width of the paragraph, or would you want it to extend into the white “margin” left and right of the text …? Based on such _actual_ requirements you’d decide what works best for the _specific_ situation. — CBroe, Apr 10 '16 at 02:15
@CBroe, thanks for your comment. I got your point. I narrowed the situation: I need to format a section of uniform text with headers and paragraphs on a single background. — ezpresso, Apr 10 '16 at 02:30

Rob · Accepted Answer · 2016-04-10T02:10:33.213

line-height is used to control the spacing between lines of a paragraph. Margin is used between elements containing only text, generally. This isn't much different than standard typography used in print.

So you set the line height for a heading and then control how much space you want underneath it with margin. Just as you would for any other component. The space between paragraphs is margin. However, the space between individual lines of a paragraph are controlled with line height.

All of this can also be used to set a vertical rhythm on a page. You should Google for that.

One good reference for this is The Elements of Typographic Style Applied to the Web

thanks for your reply and for pointing out the article, which is of great help! — ezpresso, Apr 10 '16 at 02:37

score 2 · Answer 2 · answered Apr 10 '16 at 02:04

I don't think it's a black and white matter. Though I am a big fan of paddings. You should really use what you feel is best.

For me padding is for spacing what's inside and margin for spacing what's outside. Sometimes padding can cause problems with the box-model dimensions, other times it can conflict with a background-image. Margins in the other hand can break layouts and can collapse.

So you really need to understand how each property affects the box-model and flow and use whichever you are comfortable with. Also worth noting that margin accepts negative values while padding does not.

If you wanted to add space that does not affect the layout flow, you could resort to positioning.

score 2 · Answer 3 · answered Apr 10 '16 at 02:52

I narrowed the situation: I need to format a section of uniform text with headers and paragraphs on a single background.

For the space between the border of the container element and the text content, you’d probably want to use a padding on that container element. Of course you could use margins on the inner paragraph and headline elements as well – but that would be two different types of elements you’d have to format that way. So, setting a padding once on one element, or margins one multiple elements – which seems more efficient, and probably easier to maintain?

As for the spacing between the paragraphs and headlines themselves – here you might want to use margins, because margins can collapse.

Let’s say you had

h2 { margin-top: 15px; margin-bottom: 30px; }
p  { margin-top: 10px; margin-bottom: 10px; }

(The h2 has a bigger font-size, so often it is desirable from a typographic perspective, that it should keep more distance to the preceding/following content as well, as say two paragraph elements directly following each other.)

Now with a headline followed by a paragraph in your HTML, with collapsing margins, that 30px bottom margin of the headline and the 10px top margin of the paragraph still result in 30px overall distance between those elements – whereas paddings with the same values would simple add up, and you’d get 40px distance between those two elements.

Should I use margin or padding when formatting a text?

3 Answers3