Register Guidelines E-Books Today's Posts Search

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 05-06-2013, 12:09 AM   #1
rhino79
Member
rhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheeserhino79 can extract oil from cheese
 
Posts: 18
Karma: 1210
Join Date: Apr 2013
Device: Nexus 7
Question: paragraph spacing and CSS styles

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?
rhino79 is offline   Reply With Quote
Old 05-06-2013, 12:48 AM   #2
Tex2002ans
Wizard
Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.Tex2002ans ought to be getting tired of karma fortunes by now.
 
Posts: 2,297
Karma: 12126329
Join Date: Jul 2012
Device: Kobo Forma, Nook
You could use a specific div if you wanted, or you could use a blockquote tag:

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

Code:
<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:

Code:
blockquote {
    margin-left: 5%;
    margin-right: 0;
}
Tex2002ans is offline   Reply With Quote
Advert
Old 05-06-2013, 12:42 PM   #3
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,094
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
+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.
Turtle91 is offline   Reply With Quote
Old 05-06-2013, 05:06 PM   #4
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 73,970
Karma: 128903378
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Here is the best solution for a blockquote...

Code:
blockquote {
margin-top: 1em;
margin-bottom: 1em;
margin-left: 2em;
margin-right: 2em
}
JSWolf is offline   Reply With Quote
Reply


Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Paragraph spacing Banks ePub 2 08-09-2012 05:24 PM
Preference: Paragraph indent or a little paragraph spacing? 1611mac General Discussions 48 11-11-2011 12:43 AM
Nook Paragraph Spacing poppies ePub 3 04-21-2011 12:01 AM
Paragraph spacing jhempel24 Calibre 5 08-24-2010 12:14 AM


All times are GMT -4. The time now is 12:23 AM.


MobileRead.com is a privately owned, operated and funded community.