Dear experts,

 

I realize that the spacings/gap between my sentences are rather big.

 

How do I make the spacing in between each sentence after <p></p> smaller?

 

I have tried using:

 

.space {

line-height: 1px;

}

 

and then used

 

<p class="space"> - innovative in teaching (not just drilling the students in worksheets)and inject 'fun' in learning.</p>

<p class="space"> - strong in subjects' knowledge </p>

 

and also include inline height and reduce the margin to the bottom to 0 but IT'S STILL NOT WORKING.............

 

#content p{

 

margin:5px 0 0 5px;

margin-right: 45px;

line-height: 19px;

padding-left: 30px;

color: #5C5C5C;

overflow: hidden;}

 

Hope someone out there can show me the way. Many thanks.

You could try messing with letter-spacing: xxpx;

 

Not sure if thats what you mean but, depending on what number you put in for the spacing it will increase/decrease the gaps between the letters and subsequently the words.

Although the default letter spacing is 0px anyway so not sure it will help but you can apply -1px for example but might look a little cramped.

Actually you can just use word-spacing: 5px; for example and that wont effect the letters.

I think what he means is between like

 

<p>sadfskdf</p>

 

<p>sdfsd</p>

 

i think if you reset the p{maring:0;padding:0;} then this should combat that.

Ah yes

I think what he means is between like

 

<p>sadfskdf</p>

 

<p>sdfsd</p>

 

i think if you reset the p{maring:0;padding:0;} then this should combat that.

 

 

Yes. What I want is the line spacing between a few sentences.

 

For example :

 

alkdjfdalksjfak

 

aldjfakdsjfdakjfa

 

I want the gap between the 2 sentences above to be smaller. What changes I must make to my codes above to make that happen ?

p{margin:0;padding:0;}

 

try that see if that works

p{margin:0;padding:0;}

 

try that see if that works

I can't use this, as I need to have some margin at certain <p> </p>.....

It looks like you should be using an unordered list for this, but anyway - assuming your selectors are correct, you have your style set for all p tags in the id="content" block, and then you have .space defined as just adjusting the line-height. Your #content p {} has margins defined on all 4 sides but only padding on the left. I bet there is something further up the cascade setting your upper and/or lower padding to a number that's evidently too high for your liking here.

 

Try for example

 

.space {
   padding: 3px 30px;
}

Remember, padding and margin will have an effect on p tags. If that doesn't work, try inline styling. If that in turn does work, you've definitely go cascade issues rather than using the wrong CSS. Use firebug to see what inherits from where, or link us to somewhere we can look at your entire code to see what's wrong.

 

Finally, having a selector such as .space and then a load of <p class="space"></p> probably isn't the best coding style. Selectors like your #content p {} are more desirable. In this case specifically, it looks like you're after a list of bullet points, for which you should be using

 

<ul>
   <li>item</li>
   <li>item</li>
</ul>

with ul and li styled accordingly.

 

Finally, are you sure you want your p tags to be overflow: hidden?

Obviously need my morning coffee, just quoted myself for no reason...

You could try using something like

 

p + p{margin-top:20px}

 

To add spaces between paragraphs, or

 

p{line-height: 2em;}

 

to add spaces between the lines within a paragraph. I'm not sure if that's what you meant.

 

For targeting specific paragraphs, you need a hook (such as a class) or to work down from a higher selector.

 

E.g.

 

#wrapper #content > div#left_col > p{padding:10px 0;}

 

This would add padding only to the paragraphs that are direct children of the #left_col div that's directly within #content which is placed anywhere within #wrapper (#content can be nested several levels deep inside #wrapper, it'll still take effect).

 

Do you have a full code example? (the above might be a little hard to follow, if i can show you based on what you currently have available, it might be easer).

Actually, I do not want to increase the height between my sentences...I want to reduce it.

 

Please refer to my site: www.hi5tutors.com.

 

Thanks.

Reduce it between the lines or between the paragraphs?

 

p{padding: 10px 5px 0px;} // (line 42)

You're adding 10px padding above and below each paragraph

 

#content p{margin: 5px 45px 0px 5px;} // (line 185)

You're adding 5px margin above the paragraphs.

 

So at beneath each paragraph, their should be 25px space (10 + 10 + 5).

 

Just fiddle with those values to adjust the spacing, or alternatively if you just want to target #content p (this example will remove all the spacing above and below the paragraps)

 

#content p{
margin: 0px 45px 0px 5px;
padding: 0px 5px 0px;
}

Reduce it between the lines or between the paragraphs?

 

p{padding: 10px 5px 0px;} // (line 42)

You're adding 10px padding above and below each paragraph

 

#content p{margin: 5px 45px 0px 5px;} // (line 185)

You're adding 5px margin above the paragraphs.

 

So at beneath each paragraph, their should be 25px space (10 + 10 + 5).

 

Just fiddle with those values to adjust the spacing, or alternatively if you just want to target #content p (this example will remove all the spacing above and below the paragraps)

 

 

 

But, I do not want changes to my paragraph. I want changes of spacing between my SENTENCES. The spacing between the 1st sentence and the 2nd sentence, not paragraph and this is where I am stuck.

 

#content p{
margin: 0px 45px 0px 5px;
padding: 0px 5px 0px;
}

But, I do not want changes to my paragraph. I want changes of spacing between my SENTENCES. The spacing between the 1st sentence and the 2nd sentence, not paragraph and this is where I am stuck.

To be more clear in what I want, I have pasted the two lines below which I want the spacing between the 2 lines between passion in teaching and innovative in teaching blah blah blah to reduce. Hope that I am clear enough.

 

- passion in teaching

 

- innovative in teaching (not just drilling the students in worksheets)and inject 'fun' in learning.

increase the line height

 

p {line-height:1.8;} just increase or decrease the number to make the space between lines larger. default is around 1.4 times the height of the text.

Then you use the line-height property

 

http://www.w3schools...line-height.asp

 

Edit:: I just saw the example you gave.

 

You're html markup looks like this.

 

<p>- passion in teaching</p> 
<p class="space">  - innovative in teaching (not just drilling the students in worksheets)and inject 'fun' in learning.</p> 

 

The space is being caused by the padding and the margins between the paragraphs, like i said before.

Then you use the line-height property

 

http://www.w3schools...line-height.asp

 

Edit:: I just saw the example you gave.

 

You're html markup looks like this.

 

<p>- passion in teaching</p> 
<p class="space">  - innovative in teaching (not just drilling the students in worksheets)and inject 'fun' in learning.</p> 

 

The space is being caused by the padding and the margins between the paragraphs, like i said before.

 

Thank you. It is working fine now....next ...to work on my mess-up layout :-( Wonder how you guys can keep your mind insane by working on these layout stuff....I get so frustrated adjusting all the sizes etc...really need a cool head to do it...