-
CSS for spacing BETWEEN paragraphs & bullets?
I'd like to adjust my style sheet to have only a single line between
paragraphs and bullets (instead of the double-line), but can't seem to find
the right tool to tweak.
Is this possible? Will this end up being overridden by browsers?
I can use SHIFT-[Return] to create a line break, but then any style applied
is carried across to the new line. And in a bulleted list, this does not
insert a new bullet.
I'm trying to get out of the habit of formatting text manually by always
referring to the default style, but the double-line between paragraphs and
list items offends my layout sensibilites. ;-)
And while I'm on the topic, when editing the site style, if I click on the
first item in the list in the graphic editor, it selects the entire list. If
I click on the *second* item, only that item is selected. It seems I can
change the formatting for each independently, but I'm not sure how these
interact, or even what the difference is.
Thanks for any tips,
-RayC
-
Re: CSS for spacing BETWEEN paragraphs & bullets?
Adjust CSS margin-bottom and line-height properties on your p and ul li
selectors.
http://www.w3schools.com/css/tryit.a...ss_line-height
line-height can be expressed in multiples ( 1, 1.5, 2, 3...), ems, % or
pixels.
margins can be in ems or pixels.
--
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
-------------------------------------------
www.twitter.com/altweb/
www.alt-web.blogspot.com/
-
Re: CSS for spacing BETWEEN paragraphs & bullets?
Either I don't understand your suggestion, or I did a poor job of explaining
what I'm after. Either way, it's all my fault. ;-)
When you start a new paragraph or a new list item by hitting the [RETURN]
key in a text box, you will get a space equivalent to a blank line between
each paragraph/list item.
EG.
Paragraph 1.
<--- blank line between
Paragraph 2.
Often, what I'd like to do is have is:
Paragraph1.
Paragraph 2.
.... with no space between.
My understanding is line-height defines line spacing *within* a paragraph,
and margins can create a larger space around a paragraph, but I'd like to
effectively have a *smaller* space between. If you used SHIFT+[Return],
you'd get a line break with no extra line in between. I'd like to do that
with a paragraph or a list item.
Oooh... I may have figured something out. I can put a NEGATIVE number in the
margin to make it smaller. But everything about that screams "Danger, Will
Robinson." Would that be acceptable practice?
-Ray
"Nancy O" <nancyoshea1@NOSPAMatt.net> wrote in message
news:hinmfl$qtv$1@DailyPlanet.news.netobjects.com. ..
> Adjust CSS margin-bottom and line-height properties on your p and ul li
> selectors.
> http://www.w3schools.com/css/tryit.a...ss_line-height
>
> line-height can be expressed in multiples ( 1, 1.5, 2, 3...), ems, % or
> pixels.
> margins can be in ems or pixels.
>
> --
-
Re: CSS for spacing BETWEEN paragraphs & bullets?
I think you're talking about what I use at times, what I call a soft return.
It kicks things down to the next line without leaving a space between.
Soft return is hold down <SHIFT> then hit <ENTER>.
Hope this helps,
Mary
"Ray Campbell" <crayz@SPAMMENOT.amonavi.com> wrote in message
news:hint7h$u2j$1@DailyPlanet.news.netobjects.com. ..
> Either I don't understand your suggestion, or I did a poor job of
> explaining what I'm after. Either way, it's all my fault. ;-)
>
> When you start a new paragraph or a new list item by hitting the [RETURN]
> key in a text box, you will get a space equivalent to a blank line between
> each paragraph/list item.
>
> EG.
>
> Paragraph 1.
> <--- blank line between
> Paragraph 2.
>
> Often, what I'd like to do is have is:
>
> Paragraph1.
> Paragraph 2.
>
> ... with no space between.
>
> My understanding is line-height defines line spacing *within* a paragraph,
> and margins can create a larger space around a paragraph, but I'd like to
> effectively have a *smaller* space between. If you used SHIFT+[Return],
> you'd get a line break with no extra line in between. I'd like to do that
> with a paragraph or a list item.
>
> Oooh... I may have figured something out. I can put a NEGATIVE number in
> the margin to make it smaller. But everything about that screams "Danger,
> Will Robinson." Would that be acceptable practice?
>
> -Ray
>
> "Nancy O" <nancyoshea1@NOSPAMatt.net> wrote in message
> news:hinmfl$qtv$1@DailyPlanet.news.netobjects.com. ..
>> Adjust CSS margin-bottom and line-height properties on your p and ul li
>> selectors.
>> http://www.w3schools.com/css/tryit.a...ss_line-height
>>
>> line-height can be expressed in multiples ( 1, 1.5, 2, 3...), ems, % or
>> pixels.
>> margins can be in ems or pixels.
>>
>> --
>
>
-
Re: CSS for spacing BETWEEN paragraphs & bullets?
Ray,
You were nearly there when you mentioned margins. The spacing between
paragraph (<p>) elements defaults in most browsers to one line. To
change this, you set the 'margin-top' and 'margin-bottom' CSS properties
of the paragraph element. You can do that by:
- type in your paragraphs
- highlight all the paragraphs you want to close up
- in the CSS Common panel, under the Margins tab, set Top and Bottom
to (e.g.) 0px. You don't need to use a negative number, 0px margin will
achieve the same effect as using Shift-Enter. So Space Family Robinson
is safe again until the next episode <g>
Hey presto, tulips. You can also set the margin properties in the CSS
Properties panel (it's part of the Box properties). This is a little
cleaner, since you can specify the spacing in ems rather than px (the
CSS Common for some reason always reverts to px - for me at least). This
nice thing then is that the space between lines scales to the font size.
If you want to see the effect of playing with different margin settings,
thry this (other) w3schools page:
http://www.w3schools.com/css/tryit.a...s_margin_sides
HTH,
Derek
On 14/01/2010 19:58, Ray Campbell wrote:
> Either I don't understand your suggestion, or I did a poor job of explaining
> what I'm after. Either way, it's all my fault. ;-)
>
> When you start a new paragraph or a new list item by hitting the [RETURN]
> key in a text box, you will get a space equivalent to a blank line between
> each paragraph/list item.
>
> EG.
>
> Paragraph 1.
> <--- blank line between
> Paragraph 2.
>
> Often, what I'd like to do is have is:
>
> Paragraph1.
> Paragraph 2.
>
> .... with no space between.
>
> My understanding is line-height defines line spacing *within* a paragraph,
> and margins can create a larger space around a paragraph, but I'd like to
> effectively have a *smaller* space between. If you used SHIFT+[Return],
> you'd get a line break with no extra line in between. I'd like to do that
> with a paragraph or a list item.
>
> Oooh... I may have figured something out. I can put a NEGATIVE number in the
> margin to make it smaller. But everything about that screams "Danger, Will
> Robinson." Would that be acceptable practice?
>
> -Ray
>
> "Nancy O"<nancyoshea1@NOSPAMatt.net> wrote in message
> news:hinmfl$qtv$1@DailyPlanet.news.netobjects.com. ..
>> Adjust CSS margin-bottom and line-height properties on your p and ul li
>> selectors.
>> http://www.w3schools.com/css/tryit.a...ss_line-height
>>
>> line-height can be expressed in multiples ( 1, 1.5, 2, 3...), ems, % or
>> pixels.
>> margins can be in ems or pixels.
>>
>> --
>
>
-
Re: CSS for spacing BETWEEN paragraphs & bullets?
OK. The lights are on!
In fact, I played with that exact W3 School page after Nancy's post to see
what I was missing. My oversight was looking at the relationship between the
paragraph *with* the margin formatting to the one *without*, so the gap
between didn't close until I used a negative number. With *both* paragraphs
using the same CSS formatting, of course it works fabulously.
Thanks, Derek, for explaining.
And, Nancy, I should know by now to never doubt you! You are the Queen of
CSS.
No, make that PrinCSS Nancy! :-D
-RayC
"Derek" <no.reply@who.cares> wrote in message
news:hio16s$kn$1@DailyPlanet.news.netobjects.com.. .
> Ray,
>
> You were nearly there when you mentioned margins. The spacing between
> paragraph (<p>) elements defaults in most browsers to one line. To change
> this, you set the 'margin-top' and 'margin-bottom' CSS properties of the
> paragraph element. You can do that by:
>
> - type in your paragraphs
> - highlight all the paragraphs you want to close up
> - in the CSS Common panel, under the Margins tab, set Top and Bottom to
> (e.g.) 0px. You don't need to use a negative number, 0px margin will
> achieve the same effect as using Shift-Enter. So Space Family Robinson is
> safe again until the next episode <g>
>
> Hey presto, tulips. You can also set the margin properties in the CSS
> Properties panel (it's part of the Box properties). This is a little
> cleaner, since you can specify the spacing in ems rather than px (the CSS
> Common for some reason always reverts to px - for me at least). This nice
> thing then is that the space between lines scales to the font size.
>
> If you want to see the effect of playing with different margin settings,
> thry this (other) w3schools page:
>
> http://www.w3schools.com/css/tryit.a...s_margin_sides
>
> HTH,
>
> Derek
-
Re: CSS for spacing BETWEEN paragraphs & bullets?
I created a .nogap CSS definition in the style|selector tab as
margin-bottom : 0px;
padding-bottom : 0px;
margin-top : 0px;
padding-top : 0px;
margin-left : 0px
and then set this style for the selected text in the text properties box
that I want to have nogap (ie no line space)
You reuse this then throughout your site as you please.
Regards, Steve
"Ray Campbell" <crayz@SPAMMENOT.amonavi.com> wrote in message
news:hio9cr$519$1@DailyPlanet.news.netobjects.com. ..
> OK. The lights are on!
>
> In fact, I played with that exact W3 School page after Nancy's post to see
> what I was missing. My oversight was looking at the relationship between
> the paragraph *with* the margin formatting to the one *without*, so the
> gap between didn't close until I used a negative number. With *both*
> paragraphs using the same CSS formatting, of course it works fabulously.
>
> Thanks, Derek, for explaining.
>
> And, Nancy, I should know by now to never doubt you! You are the Queen of
> CSS.
>
> No, make that PrinCSS Nancy! :-D
>
> -RayC
>
> "Derek" <no.reply@who.cares> wrote in message
> news:hio16s$kn$1@DailyPlanet.news.netobjects.com.. .
>> Ray,
>>
>> You were nearly there when you mentioned margins. The spacing between
>> paragraph (<p>) elements defaults in most browsers to one line. To change
>> this, you set the 'margin-top' and 'margin-bottom' CSS properties of the
>> paragraph element. You can do that by:
>>
>> - type in your paragraphs
>> - highlight all the paragraphs you want to close up
>> - in the CSS Common panel, under the Margins tab, set Top and Bottom to
>> (e.g.) 0px. You don't need to use a negative number, 0px margin will
>> achieve the same effect as using Shift-Enter. So Space Family Robinson is
>> safe again until the next episode <g>
>>
>> Hey presto, tulips. You can also set the margin properties in the CSS
>> Properties panel (it's part of the Box properties). This is a little
>> cleaner, since you can specify the spacing in ems rather than px (the CSS
>> Common for some reason always reverts to px - for me at least). This nice
>> thing then is that the space between lines scales to the font size.
>>
>> If you want to see the effect of playing with different margin settings,
>> thry this (other) w3schools page:
>>
>> http://www.w3schools.com/css/tryit.a...s_margin_sides
>>
>> HTH,
>>
>> Derek
>
>
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules