[an error occurred while processing this directive] Margins, Padding & Line Breaks

Margins, Padding & Line Breaks

What is their Relationship?

From the begining of the web, confusion has often reigned over the application of margins and padding, along with when and when not to use the ubiquitous 'line-break', i.e. the <br> tag.   Hopefully by the time you have had a look at the examples presented below, and read the summary paragraphs, some of this riddle may be solved.

The following styles apply to the test-1 & test-2 example divs, and each divs mark-up is shown below it.

<style>
body {background:#fff;font-family:sans-serif;font-size:0.9em;padding:0}
div#test-1, div#test-2 {width:450px;padding:0 15px;background:#cdf;border:solid 1px blue}
div#test-1 p {margin:0}
div#test-2 p {margin:14px 0}
p {background:#fffaae}
</style>

test-1

The quick brown fox jumps over the lazy dog.
Now is the time for all good people to come to the aid of the planet.



The quick brown fox jumps over the lazy dog.
Now is the time for all good people to come to the aid of the planet.

padding: 0 15px;

line-height: 32 ~ 38px

<div id="test-1">
<p>The quick brown fox jumps over the lazy dog.</p>
<p>Now is the time for all good people to come to the aid of the planet.</p>
<br><br>
<p>The quick brown fox jumps over the lazy dog.<br>
Now is the time for all good people to come to the aid of the planet</p>
</div><!--end #test-1-->

test-2

The quick brown fox jumps over the lazy dog.

Now is the time for all good people to come to the aid of the planet.

 

The quick brown fox jumps over the lazy dog.
Now is the time for all good people to come to the aid of the planet.

margin: 14px 0;

line-height: 17px;

<div id="test-2">
<p>The quick brown fox jumps over the lazy dog.</p>
<p>Now is the time for all good people to come to the aid of the planet.</p>
<p>&nbsp;</p>
<p>The quick brown fox jumps over the lazy dog.<br>
Now is the time for all good people to come to the aid of the planet.</p>
</div><!--end #test-2-->

Look carefully at the CSS and you'll find the only difference between test-1 and test-2 is that test-2 has top and bottom margins of 14px applied to the <p> tags.   Also, 15px of left/right padding has been applied in both tests, which means that vertical blue areas represent "padding", while horizontal blue areas represent "margin".

Furthermore, margins between paragraphs are not "additive", i.e. the margin is set from the top of the new paragraph to the bottom of the last line in the paragraph above.   Which means that the bottom of the last line of a paragraph will set its margin distance to the top of the first line in the paragraph below, and each of these margins overlap each other with the largest margin value being the one which is set.

However, in test-1 a couple of <br><br> tags are used instead of <p>&nbsp;</p> to create a larger space between the adjoining paragraphs. The <br> tag contains two features, i.e. a browser dependant 'line-height' which in this case varies between 1em (16px) and 1.2em (19px), and the ability to create a 'line-break'.   This 'line-height' is unable to be modified using CSS.   So in the test-1 example, the pale-blue area contains the <br><br> with a combined notional 'line-height' of ≈38px in Firefox 25, 34px in IE11, 32px in Opera 12.16, Chrome 31 and Safari 5.1.7, which is greater than the 14px margins and is therefore the 'effective' margin set.   In test-2 the &nbsp; in the <p>&nbsp;</p> spacer creates the paragraph 'line-height' of 17px, and the margins of 14px each are responsible for the remaining space which adds up to 45px.

Finally, the answer to the often posed question regarding the use of the <br><br> tags in lieu of <p>&nbsp;</p> tags when creating extra vertical spacing is, "Either is permissible, and the choice is yours".   As shown in the preceding paragraph, the result is never the same and ideally any extra spacing requirements should be created using CSS, thereby avoiding any further mark-up.   Best practice is to only use the <br> to break a line within a paragraph and avoid multiple sequential use of that tag.

When a spacer is necessary, the precise way of setting it is as follows;

<p style="margin:0;line-height:0;height:40px"></p>

- which creates a 40px spacer between the borders of the elements above and below it, to which will be added any margins already set by those elements (Note: there is no &nbsp; included).

Barry Carlson

- 22 November 2013 -