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:
- Difference between margin and padding?
- When to use margin vs padding in CSS
- Margin or padding what is recommended?
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 -->