PDA

View Full Version : spacing between paragraphs


blimp
07-21-2009, 02:21 AM
How do I adjust the spacing between paragraphs using CSS?

http://img291.imageshack.us/img291/5582/picture3d.jpg

edbr
07-21-2009, 04:40 AM
use a bottom margin in <p> orr assign a class if it is not to be universal on your site

d a v e
07-21-2009, 04:41 AM
in your style sheet add the amount of padding/margin you would like
e.g.
p {margin-bottom:1em;}

(or px if you're using px, or % )


(oops sorry just saw edbr's post)

blimp
07-22-2009, 01:40 AM
edbr & dave for some reason its not working for me.


I've placed the text in a div:

<div id="textContent">
<h1 class="h1">Caterina Music Tuition</h1>
<p>Caterina Franco Music Tuition is about having fun and discovering the musical talent hidden inside you. Situated in Jannali in the heart of Sutherland Shire <span class="italic">(across the road from the station)</span>, it's hallmark is all about caring and the thoroughly professional approach to music education.<br />
<br />
Caterina Franco Music Tuition specialises in piano, clarinet, saxophone, and electronic keyboard tuitions. Music Education can stimulate the senses and has been proven in the development of the imagination, creative thinking and communication. Whether you would like to learn music for vocational or purely recreational reasons, we can cater to suit your requirements. Music tuition is not just for children, we also provide music tuition for private students from beginners through to advanced levels including HSC subjects. We can also prepare students for all accredited music examinations including AMEB, eisteddfods, competitions (local and international) as well as the academy's own recitals and performances. To complete our dedication, we also offer accompaniment services. We can focus on students who wish to reach the highest degree of competence on his or her chosen instrument.<br />
<br />
Our fees are highly competitive and truly great value for investing time each week or term with a professional musician. The choice is yours as to how far you want to follow your passion of music.<br />
<br />
Start living your dream by contacting Caterina Franco Music Tuition to begin your tuitions on piano, clarinet, saxophone, and electronic keyboard today!</p>
</div>

Then I created a STYLE to set the container size/position and then another STYLE to set the font, color, line-height etc

#textContent {
height: 380px;
width: 830px;
position: relative;
top: 310px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#textContent p {
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
font-size: 14px;
line-height: 18px;
text-align: justify;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
padding: 0px;
margin-bottom: 0px;
}

As suggested I tried adding a bottom margin in #textContent p, but it took no affect to the spacing.

Try copy and past my above code in a new html page and you will see what I'm trying to explain.

edbr
07-22-2009, 02:34 AM
try this
.margin {margin: 0 0 5px 0;}
then use <p class="margin">

blimp
07-22-2009, 02:58 AM
hhmmm........ still no effect?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#textContent {
height: 380px;
width: 830px;
position: relative;
top: 310px;
padding: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#textContent p {
font-family: Verdana, Geneva, sans-serif;
color: #FFF;
font-size: 14px;
line-height: 18px;
text-align: justify;
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
padding: 0px;
margin-bottom: 0px;
}
body {
background-color: #666;
}
.margin {margin: 0 0 5px 0;}
</style>
</head>
<body>


<div id="textContent">
<h1 class="h1">Caterina Music Tuition</h1>
<p class="margin">Caterina Franco Music Tuition is about having fun and discovering the musical talent hidden inside you. Situated in Jannali in the heart of Sutherland Shire <span class="italic">(across the road from the station)</span>, it's hallmark is all about caring and the thoroughly professional approach to music education.<br />
<br />
Caterina Franco Music Tuition specialises in piano, clarinet, saxophone, and electronic keyboard tuitions. Music Education can stimulate the senses and has been proven in the development of the imagination, creative thinking and communication. Whether you would like to learn music for vocational or purely recreational reasons, we can cater to suit your requirements. Music tuition is not just for children, we also provide music tuition for private students from beginners through to advanced levels including HSC subjects. We can also prepare students for all accredited music examinations including AMEB, eisteddfods, competitions (local and international) as well as the academy's own recitals and performances. To complete our dedication, we also offer accompaniment services. We can focus on students who wish to reach the highest degree of competence on his or her chosen instrument.<br />
<br />
Our fees are highly competitive and truly great value for investing time each week or term with a professional musician. The choice is yours as to how far you want to follow your passion of music.<br />
<br />
Start living your dream by contacting Caterina Franco Music Tuition to begin your tuitions on piano, clarinet, saxophone, and electronic keyboard today!</p>
</div>


</body>
</html>

DWcourse
07-22-2009, 03:42 AM
You need to use paragraph tags rather than double line breaks between your paragraphs for the paragraph spacing to have any effect.

blimp
07-22-2009, 04:40 AM
Thanks guys.... all works fine now.