# Spacing paras/list items less crudely



## greiggy (Jun 29, 2004)

Is there a way of spacing paragraphs or lists less crudely? As I understand it, html allows for closed up paras or lists, or a complete line in between,  but that's all.

I would like my copy to look more like a printed page e.g. half a line or so of extra space between paras. Anyone know of a way to do this?


----------



## mdnky (Jun 29, 2004)

CSS

http://w3.org

Use line-height on the p tag:


```
p {
   line-height: 1.5em;
   }
```


----------



## Cat (Jun 30, 2004)

Just a question/observation: wouldn't percentages be more appropriate? Isn't em just related the font height/size and hence not the complete line height?


```
P { line-height: 150% }
```

See note here: 


> Microsoft Internet Explorer*3.x incorrectly treats number values and values with em or ex units as pixel values. This bug can easily make pages unreadable, and so authors should avoid provoking it wherever possible; percentage units are often a good choice.


----------



## sonjay (Jun 30, 2004)

For spacing between paragraphs, use:

p  {

margin-bottom:8px;

}

or ems, or percentages, or whatever your heart desires. Which units to use is a whole 'nother issue.

You might need to play around with padding-bottom as well. Paragraphs (and other block-level elements) have default margins and paddings that are determined by the individual browser, so if you specify both, you won't get unexpected defaults kicking in.


----------



## Pengu (Jun 30, 2004)

just remember, margin is the space between the item (paragraph) and the next, padding is the space between the contents of the item, and the edge of it.


----------



## greiggy (Jun 30, 2004)

I think from my limited knowledge of CSS "line-height" would alter all the line spacing, so I "margin-bottom" looks like what I want:

I have tried as below:

<p  class="bodyMssg" {margin-bottom:8px;}>They assign a Centurion (officer) 
        and some soldiers to guard Paul and some other prisoners and they find 
        a ship which is going West along the coast.</p>
      <p  class="bodyMssg" {margin-bottom:8px;}>&#8220;We boarded a ship&#8230; 
        bound for Ephesus and ports west.</p>


----------



## mdnky (Jun 30, 2004)

Set the font-size on the body tag in a percentage (70% to 85% range) and IE will handle anything in EMs just fine.

Nice thing about using EMs is as the text size increases (user increases it), the spacing will follow keeping everything in proportions.

Spacing for each line is line-height, spacing between paragraphs would be margin.


----------



## greiggy (Jul 1, 2004)

Okay, I am clear now about what is line-height and what is margin and margin is what I want to adjust. Can anyone tell me why my html above is wrong.?

Whether it's px or ems I feel I should be able to see the white space alter


----------



## sonjay (Jul 1, 2004)

greiggy said:
			
		

> Okay, I am clear now about what is line-height and what is margin and margin is what I want to adjust. Can anyone tell me why my html above is wrong.?



Yeah, that's not the proper syntax for CSS. If you want to use inline css, use this:
<p style="margin-bottom:8px;">

OR for an external stylesheet, use this in your html page:
<p class="bodyMssg">

And this in your stylesheet:
p.bodyMssg {margin-bottom:8px;}

And link to the external stylesheet by putting this in the head section of your html document:
<link href="style.css" rel="stylesheet" type="text/css">


----------



## greiggy (Jul 1, 2004)

Thanks, sonjay. That's really helpful and very clear -- I can work on the style sheet now. I'm a bit of a beginner with html and css and I'm really grateful for the help


----------



## greiggy (Jul 9, 2004)

Have worked with the suggestions above. What I seem to get is 1 1/2 lines space between list items i.e. the line space + the extra ems of px or whatever you put in the CSS style sheet.

What I am actually trying to achieve is a list with approx 1/2 em of what space between list items.

Like in print, if it's setting in 10/12pt and the para space is set to 6pt, so a list item would turn its lines at roughly single line spacing, but at the end para there would be that 6pt white space before the next item.

Is there a way to do this in html or is the minimum para space a whole line of white space?


----------



## sonjay (Jul 9, 2004)

Post the relevant css and html here so we can see what you've got in there.


----------



## greiggy (Jul 12, 2004)

At this point I have lost the structure of the page - the new paras don't appear as new paras and there is a 0.5 em spacing appearing more or less at random! I'm on a learning curve here and not far up it ;

Incidentally I realise there is a mixture of CSS style sheet and some additonal  html spacing -- I was experimenting to see what would work between CSS and html but I know I'm not heading down a good road here . . .

Here the html of a couple of paras:

<p class="bodyMssg">5. Prepared to battle</p>
      <p class="bodyMssg">Daniel 10, Matt 11: 12 &#8220;forceful men&#8221;,<br>
        Matt 12: 28-29 &#8220;&#8221;if I drive out demons&#8230;then the kingdom 
        of God has come&#8230;tie up the strong man&#8221;</p>
      <p class="bodyMssg"><strong>George Whitefield</strong> was a powerful preacher 
        in voice and message in the late 1700s. He was accompanied by a crippled 
        man (we don't know his name) who was his prayer warrior. <br>
        Finney&#8217;s prayer partners, Clary and Nash. <strong>Charles Finney</strong> 
        ministered in the 1820-50s. He was accustomed to walk to the next town 
        and pray as he walked. He would know what to preach (often prophetically) 
        when he arrived.</p>
      <p class="bodyMssg" style="margin-bottom: 0.5em">But the ground would have been prepared by &quot;Father 
        Nash&quot; and by Clary, who were prayer warriors, travelling ahead, renting 
        a place and just praying for souls and the entrance of the word. Who was 
        the revivalist?<br>
        <i><o></o></i></p>
      </td>


----------



## sonjay (Jul 12, 2004)

I'd bet the .5em spacing is appearing under the paragraphs where you put style="margin-bottom:0.5em" in the paragraph tag. An inline style will override any margin-bottom declaration you put in the external style sheet.

Now, can we also see what you've got declared for bodyMssg in your style sheet? And maybe you could also give us a peek at what you have declared for p in your style sheet?


----------



## greiggy (Jul 13, 2004)

Sorry, should have included CSS with html above.

p is simple:

<p class="bodyMssg">5. Prepared to battle</p>


----------



## sonjay (Jul 13, 2004)

I meant the CSS in your style sheet, as in what do you have declared for bodyMssg? Something like:

.bodyMessg {
margin-bottom: somethinghere;
padding: something;
line-height: something;
otherstuff: something;
}


----------



## greiggy (Jul 13, 2004)

Gave you what was in there, copied directly off the external CCS style sheet entry. Parameters above would have been left as defaults so not entered specifically. BTW (Sonjay) I really like your TWW index page -- very clean, nice typography. Some Q's about that, I'll start another thread.


----------



## sonjay (Jul 14, 2004)

greiggy, you've got to open up the external css stylesheet, look at it, and tell us what the style declarations are for p and p.bodyMessg.

We know that in your html you have paragraphs assigned the .bodyMessg style class, and that some of those paragraphs also have a bottom margin assigned, but we don't know what else the stylesheet is telling those paragraphs to do.

There should be a file, probably called styles.css, style.css, stylesheet.css, or something along those lines, containing the bodyMessg declaration. It should contain something like what I posted above:
.bodyMessg {
margin-bottom: .5em;
line-height:1.2em;
}

We need to know what it says.

Also -- as a side note -- I'll give you two free bonus tips today, no extra charge. 

First tip: Do you know about ordered and unordered lists? Your example "5. Prepared to battle" looks suspiciously like it could/should be an unordered list. You could do like so:

<ol>
<li>Polish your sword</li>
<li>Gird your loins</li>
<li>Prepare to do battle</li>
</ol>

And you'll get a nicely formatted ordered list that looks like this:
1. Polish your sword
2. Gird your loins
3. Prepare to do battle

Two advantages of tagging your list as an ordered list are that a) the list is formatted with a hanging "outdent" (so that multiline items wrap with the text all aligned and the number off to the left), and b) if you re-order your items, they automatically get renumbered. (A third advantage, if  you care about such things, is that your markup will be semantically correct -- i.e., paragraphs are tagged as paragraphs and lists as lists.) So that if you changed your list to:

<ol>
<li>Gird your loins</li>
<li>Polish your sword</li>
<li>Prepare to do battle</li>
</ol>

You'd then get:
1. Gird your loins
2. Polish your sword
3. Prepare to do battle

You can style the ol and li too -- I generally give the ol a generous line-height to make it easy to ready, and use a margin-bottom declaration for li to create some extra vertical spacing between individual list items.

Second free tip: When you have a series of paragraphs and you want to apply a class to all of them, you can save yourself a bunch of typing by *not* putting class="bodyMssg" in every p tag. You can wrap the whole series inside a <div class="bodyMssg"></div>, and then put this in your stylesheet:

div.bodyMssg p  {
styles here
}

This says, "every p that's inside that div tag should be styled thusly." It will leave the rest of your paragraphs, outside the div tag, alone, but will style all the paragraphs inside the div. 

But we *really* need to see the declarations in your stylesheet to figure out what's going on. If you have this online somewhere, a link would help.


----------



## greiggy (Jul 14, 2004)

Hi Sonjay,
Thanks for very helpful input. Yes I do know about ol and li but hadn't thought of applying styles to them in the way you suggest.

I think we are a little at cross-purposes: I don't hand-code this copy as I work under strict time limitations. Example is taken from a published handout which I have dropped into a table section by section using DreamWeaver.

You asume I'm a pro like you, right? Not so -- I use DreamWeaver for speed and that explains why the html isn't as clean as it would be if hand coded.

I have only one css sheet on this site (called s-bStyleSheet1.css) which was created in DW. It has about 20 styles and the BodyMssg one is typical except I have added the margin-bottom declaration. I opened the sheet and took the BodyMssg section straight out to post.

My stuff has major changes of content all the time which means that hand coding really isn't practicable. Not including writing the copy, I need to change the content of a page in 10-15 mins.

What I am trying to do it to adapt the css styles created in DW to work a little better.

DW gives me CSS definitions for type (font, size, weight, style, variant, lineheight, case, colour and decoration)
also for background (mainly for tiling images or b/g colour etc)
and for block (word spacing, letter spacing, vertical alignment, text align [=justify etc], text indent and whitespace [preserve or collapse]

Then you have box, border, list, positioning and extensions.

margin-bottom would be a declaration not supported in DW but I don't see any problem in adding it to the declarations as you suggested.

Also I add html styles such as bold or size change for speed where needed, also the list commands.

Given this compromise and the need to work fast on frequent changes, can you suggest a way through to give approx em and a half spacing for headings and half em spacings, on paragraphs?

Thanks so much for your help and for bearing with me. OK, you may say, learn to hand-code really fast! But DW is designed to do this job, I might just need to learn to tweak the code it puts in.


----------



## greiggy (Jul 14, 2004)

Living dangerously here! Here's a link so you can see it on the page.

Just remember I'm not a webdesigner! Done with my left hand and always against deadlines.

http://www.shinfield-baptist.org.uk/RECENT_WEEKLY_CONTENT/JULY 04/4th_July_04_mssg.html


----------



## sonjay (Jul 14, 2004)

Sorry if I assumed a level of knowledge that isn't there. But you can use the techniques I suggested from within Dreamweaver, and mostly from within its GUI interface, although some things do require dropping into code view. I started out hand-coding back in 1996, and didn't start using Dreamweaver until about a year ago. Now, I love how it saves me the drudgery of hand-coding, but I find it indispensable to know the code so I can drop into code view to bend DW to my will. What version of DW do you use? DW has pretty good support for styles (particularly the latest version), but it does a lot of stuff pretty inefficiently.

When you paste the paragraphs into a table cell, do you then laboriously select each paragraph and apply the .bodyMssg style to each one individually? It looks to me, from a quick look at the page you linked to, that you could apply the .bodyMssg style to the table cells, or perhaps even to the table, and then just paste the text into each cell and move on. 

Your bodyMssg style declaration says that elements with the style bodyMssg should have a line-height of 100%, and a margin-bottom of 8px -- but also that they should display inline. Inline elements don't really have margins -- so you've got conflicting declarations in your style, and browsers might well interpret those differently.

Here's your .bodyMssg style:

.bodyMssg {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	color: #000000;
	line-height: 100%;
	text-align: left;
	vertical-align: baseline;
	white-space: normal;
	border: none;
	display: inline;
	margin-bottom:8px;
}

I would remove the display:inline altogether from that declaration. And in your code, everywhere you have <p style="margin-bottom:something;"> I'd change every one of those so that it just reads <p>. I'd also remove every instance of <p class="bodyMssg"> and make it just <p>. Then I would make the td's (the table cells) <td class="bodyMssg">. You have class="bodyGold" applied to all the table's content cells, and then that gets overridden everywhere by the bodyMssg class on the individual paragraphs. I don't see anywhere on the page the bodyGold text is actually used. 

If you apply class="bodyMssg" to each table cell where you want that style, then you can just paste the copy into the cell as text, and poof, you're done.

I think removing the "display:inline" from your .bodyMssg style declaration will solve your immediate problem. Your "margin-bottom:8px" _should_ give you the paragraph spacing you want, *if* your paragraphs aren't being displayed inline. So do that first (remove display:inline) and see what you get. Then maybe consider whether you want to optimize things a bit more. Believe me, if you learn a little more about css and its power, you'll be able to get more done in a shorter period of time than trying to do everything the quick-and-dirty way. Quick and dirty isn't always faster. Investing a little time upfront to learn better ways of doing things can save a lot of time in the long run.


----------



## greiggy (Jul 15, 2004)

Thanks, Sonjay. A lot I can work with there.The BodyGold isn't used on that page -- probably a carryover because I tend to dup. pages rather than start afresh, for speed. I repent of that!

I agree with your comment that quick and dirty is not always particularly quick. I think the challenge for me is to look at this code a lot more and clean it up where it needs it -- and as you have commented, it does need it.

class-BodyMssg applied to each cell -- hey, I like that! I could get into this hand coding. Just need to climb a little higher than my lowly place on the learning curve. I accept your advice and I'll do some reading on CSS.

I'll do a bit more work and post how I get on. Many thanks again.

BTW How do you get your Tropical Web Works pages looking so good? I mean, good typo? Do you have a way of embedding better fonts than the 4 or 5 standbys?


----------



## sonjay (Jul 15, 2004)

Greiggy, it sounds like you're "getting it" with regard to applying the class to the parent element (the td) rather than individually (i.e., to every paragraph). When I first realized how much time that alone would save me, it was very eye-opening. 

Thanks for your comments on my site. The type is just your basic Verdana, nothing special, but with a css-declared line-height of 150%. I've always been partial to type set with extra leading; I think it's "cleaner" and easier to ready. I'd bet that's what you like about it.


----------



## greiggy (Jul 16, 2004)

Now I'm learning to use the line-height and margin-bottom declarations it will make a huge difference to the typo effect. I think TWW is a great example of how simple elements can be used powerfully to produce a very clean page.

BTW I discovered that margin-bottom has a default which is a minumum of one em. Setting the parameter to -0.5em tightens the paras. This works well on <p> </p>

HOWEVER it has the effect of  reducing the space on the <br> tags as well.

Maybe it would be better to set 0.5em extra space on the <br> -- this will not have any effect on the <p> as far as I can tell.

Next step: can I set two CSS styles (they are meant to cascade) e.g. BodyMssg and one that just contains a spacing declaration? Haven't managed to make it work yet.


----------



## sonjay (Jul 16, 2004)

What do you know..... I never tried setting a margin-bottom on <br> before, but it works! However, it didn't appear, in my brief test, that a margin-bottom on paragraphs  had any effect on <br> tags. It's interesting that you're seeing an effect, and I wonder why.

Next step: I'm not clear on exactly what you mean as far as setting two CSS styles. You can set all the CSS styles you want, and yes, they cascade. (Cascading order and inheritance can be a real bear to figure out sometimes, if you've got a long complex stylesheet.) 

Do you mean you want a bodyMssg style that has no spacing declaration, and another style, containing just a spacing declaration, that you can selectively apply to elements that already have the bodyMssg style? Yes, an element can have two class styles applied to it. You would just do <p class="bodyMssg otherstyleclass"> -- put a space in between the class names, no other punctuation.  It's valid according to the specs, but I'm not sure how widely browsers support it. 

Or if you applied the bodyMssg style to the table cell, as I suggested earlier, you could apply the other style to the paragraphs individually inside the cell. They'll inherit all the declarations from bodyMssg, and add the style(s) in the second style.


----------



## greiggy (Jul 16, 2004)

Sonjay writes:
"Or if you applied the bodyMssg style to the table cell, as I suggested earlier, you could apply the other style to the paragraphs individually inside the cell. They'll inherit all the declarations from bodyMssg, and add the style(s) in the second style."

Reckon that's the obvious way to go. Putting two class names in hasn't worked well for me but I might not have got the syntax exact.

But a style on the td and a second style on the paras -- that sounds neat.

Above, re the <br>tags, I did see an effect on the page I was working on earlier, but only when I downloaded it again. Haven't been able to replicate it. Might have been wrong about this -- could have been caused by something else.

What I do know is, to close up to less than an em white space between paras, the declaration has to be minus e.g. -0.5em


----------



## sonjay (Jul 16, 2004)

greiggy said:
			
		

> What I do know is, to close up to less than an em white space between paras, the declaration has to be minus e.g. -0.5em



I'd be careful with that; a browser that interprets it literally will overlap the paragraphs.

I'd guess that you're getting some default padding showing up. If you scroll way up this page to my first post in this thread, you'll see I mentioned padding. You may want to set padding-bottom:0 in your style declaration as well, and see if that works.

I know, this can be a pain to figure out, but once you have it set up, you'll be able to copy and paste like a whirling dervish to get your new pages done.


----------

