You’re doing it wrong — On the setting of paragraphs — CSS Wizardry Toybox — CSS, Web Standards, Typography, Grids and now HTML5 (HTML5 Version)

You’re doing it wrong — On the setting of paragraphs

Recently I have noticed what almost seems to be a trend among web designers; the setting of indented paragraphs with spacing between each. It is one or the other. Furthermore, if your paragraphs do adopt the indented format, you only indent the second paragraph onward, leaving the first flush left. The first example is what is becoming commonplace, the second is how it should be set.

The ‘trend’

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In accumsan diam vitae velit. Aliquam vehicula, turpis sed egestas porttitor, est ligula egestas leo, at interdum leo ante ut risus. Cras ut nunc. Phasellus imperdiet, urna in volutpat venenatis, mauris pede euismod pede, malesuada euismod turpis enim at arcu.

Sed placerat accumsan mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam suscipit, quam at placerat interdum, quam turpis placerat pede, eget sagittis arcu sapien vel mauris. Nulla faucibus turpis eget tellus. Integer mattis dapibus lorem. Donec pretium lorem vel ligula.

Fusce semper consequat dui. Integer ac mi. Cras faucibus nulla quis ipsum. Nunc augue turpis, tristique et, hendrerit id, hendrerit eu, lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vulputate. Proin et erat id ipsum accumsan porttitor.

Correct

The CSS

The following CSS will set your paragraphs correctly:

p{
	[…other styles…]
	text-indent:0;
	margin:0;
}
p+p{
	text-indent:2em;
}

CSS Wizardry You’re doing it wrong — On the setting of paragraphs

[Content]