• Resolved marcialc

    (@marcialc)


    Although I have seen several posts asking for help w/ CSS when the space between paragraphs is too small (or non-existent), I have the opposite problem.

    I’m new to CSS and despite all my reading (and endlessly playing with the CSS file in a hit or miss fashion), I can’t figure out why the paragraphs are so far apart.

    All margin and padding elements are set for both top and bottom margins to be 0. Here are some snippets from the file.

    /* body
    ————————————————–*/
    body {
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:75%;
    line-height:1.6em;
    text-align:center;
    }

    /* paragraphs, lists, etc
    ————————————————–*/
    p {
    margin:0;
    padding:0 0 18px 0;
    }

    ul {
    margin:0;
    padding:0 0 18px 0;
    }

    ul ul {padding:0;}

    blockquote {
    margin:0;
    padding:0 0 18px 0;
    font-style:italic;
    }

    Might someone be able to tell me what I need to adjust to make them closer together? I am guessing the problem has to do with a margin-bottom tag, because this isn’t an issue at the top of each post, but I still can’t figure out how to fix it.

    I have checked in both IE and Firefox, and they are too far apart in both places. Thank you in advance!!!

    You can see for yourself at https://www.agelesslearner.com/blog/.

Viewing 8 replies - 1 through 8 (of 8 total)
  • In your layout.css you have a section like this:

    /* paragraphs, lists, etc
    --------------------------------------------------*/
    p {
    margin:0;
    padding:0 0 18px 0;
    }

    Change the 18px to something normal.

    Thread Starter marcialc

    (@marcialc)

    Thanks! That cleared it up right away. For me, normal was 5px (which I came to after trying a wide-range of numbers).

    Now, however, my blockquote paragraph spacing is too small. I’ve tried adjusting that same number (the 3rd one), without success. I also tried adding additional values to the margin line but neither seems to have any influence on the paragraph spacing at all.

    I’d actually like to change the blockquote to look like it did on my old blog, where there the blockquote style was like this:

    blockquote {
    margin: 15px 30px 0 10px;
    padding-left: 20px;
    border-left: 5px solid #ddd;
    }

    But when I add that into the layout.css file, it creates the left rule but the paragraphs are still too close together. I’ve tried adjusting the 3rd value way up, and still not difference in spacing. I thought that the 3rd number was for “bottom” but clearly I’m wrong — and missing something! I’ve reverted the blockquote section back to the way it’s listed in my original post for now and hope that once I can figure out how to improve the spacing, I’ll be able to add back in the left rule and remove the ital.

    There’s some other blockquote css in the mx4.css stylesheet I think. And if it were me, I would put ALL the damn css in ONE stylesheet, with every selector in one place for its associated element.

    But that’s just me.

    [If you have 4 numbers in a margin or padding selector, the third one IS the bottom. If you have 2 numbers, the first one is top/bottom, the second is left/right. If you have 3 numbers, I haven’t a clue – when I see something like that I change it to 2 or 4.]

    Thread Starter marcialc

    (@marcialc)

    It sounded so promising, but there isn’t a blockquote css in the mx4.css. I checked throughout, and also checked to see if there was some other conflicting margin settings. [And I didn’t mean to imply I had any sets of 3 values. I’m just trying to figure out what to adjust to get this blockquote to look right.]

    As soon as I have the time to learn a whole bunch more about CSS, I will combine the style sheets. That makes tons of sense. Thank you so much for your help.

    Hmm. Crossed eyes here then. I thought I’d seen it both places.

    In this:
    blockquote {
    margin: 15px 30px 0 10px;
    padding-left: 20px;
    border-left: 5px solid #ddd;
    }

    try changing to this:

    blockquote {
    margin: 15px 30px 0 10px;
    padding:0 0 5px 20px;
    border-left: 5px solid #ddd;
    }

    and see what happens.

    Couple other thoughts: learning css is more a matter of doing than reading about it. Copy “vanilla” versions of your stylesheets somewhere safe as a backup, then just play – change things to see what happens.
    1. This is easier if you download and install XAMPP from https://www.apachefriends.org/en/xampp.html – this gives you (assuming a windows machine) a very usable local server for testing things like wordpress without having to upload to check every change.

    Anyway, try what I posted, and post back if you need further help….

    Now, however, my blockquote paragraph spacing is too small. I’ve tried adjusting that same number (the 3rd one), without success […]

    I think you want to address the paragraphs inside the blockquote:

    blockquote p { margin: 0 0 1em 0;}

    Though I notice that your theme uses padding and pixels for those, so substitute.

    The body { line-height: 1.6em } is going to affect the apparent vertical spacing, too, a little.

    Thread Starter marcialc

    (@marcialc)

    Sam, introducing the p did the trick, fixing the paragraph spacing issue. It also messed up the vertical line I was using, however. After playing around with different properties, I gave up trying to fix it and I’m now happy with the new format. Thank you for your help! [And also the help of everyone who has responded to this post.]

    I looked at the HTML on that page — the paragraphs are double wrapped [p][p]...[/p][/p] and the blockquotes are *inside* paragraphs [p][blockquote]...[/blockquote][p].

    You should definitely fix those if you can. (The styling is going to unpredictable if the HTML structure is broken.)

    Are you using a text filter like Markdown?

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Too much space between paragraphs’ is closed to new replies.