View Full Version : Question: paragraph spacing and CSS styles


rhino79
05-06-2013, 01:09 AM
Let's say I have a block quote with three paragraphs. The desired result would have a bit of space above the first paragraph and a bit of space after the last paragraph, and the entire block will be indented right.

My question is this: what is the standard way of achieving this... styling each paragraph or wrapping the paragraphs in a div and styling the div? With paragraphs, its necessary to have a style for the first paragraph (space above), the middle (no spacing) and the last paragraph (space below). This is rather tedious. The alternative would be to place the paragraphs in a div and style the div with space on top and bottom.

What's the "correct" way to do this?

Tex2002ans
05-06-2013, 01:48 AM
You could use a specific div if you wanted, or you could use a blockquote tag:

http://www.w3schools.com/tags/tag_blockquote.asp

<blockquote>
<p>Paragraph one.</p>
<p>Paragraph two.</p>
<p>Paragraph three.</p>
</blockquote>

You can then have the CSS applied to blockquote classes. You could then leave the blockquote design up to the specific device, or you could apply CSS along the lines of:

blockquote {
margin-left: 5%;
margin-right: 0;
}

Turtle91
05-06-2013, 01:42 PM
+1 Tex

You can also use the CSS to style the paragraphs within the blockquote/div:

blockquote p {text-indent:0; font-size:1.2em; fant-family:script}

...or whatever you want. You can style with classes too:

blockquote.script p {}
blockquote.terminal p {}
blockquote.song p {}
blockquote.verse p {}

Etc.

JSWolf
05-06-2013, 06:06 PM
Here is the best solution for a blockquote...

blockquote {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 2em;
margin-right: 2em
}