Results 1 to 8 of 8

Thread: CSS for spacing BETWEEN paragraphs & bullets?

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Ray Campbell
    Guest

    Default 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


  2. #2
    Nancy O
    Guest

    Default 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/





  3. #3
    Ray Campbell
    Guest

    Default 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.
    >
    > --




  4. #4
    Mary Furlong
    Guest

    Default 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.
    >>
    >> --

    >
    >




  5. #5
    Derek
    Guest

    Default 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.
    >>
    >> --

    >
    >



  6. #6
    Ray Campbell
    Guest

    Default 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




  7. #7
    Steve Booth
    Guest

    Default 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
  •