31

I found a similar topic, to this, but I can't find the specific CSS to change in WordPress. If you go to my homepage. Or blog.

I want to change the spacing within and between paragraphs and am not sure which element I need to modify in my CSS.

I found a line-height property for .body, but that doesn't seem to do what I want.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Dan
  • 423
  • 1
  • 4
  • 5
  • 1
    You should fix your header, it's overlapping with the content. – yaakov Dec 21 '16 at 01:50
  • The *www.b2bleadgenguy.com* links seem to be (effectively) broken. For instance, for the blog post link the result is *"Not Found. The requested URL was not found on this server. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request."*. – Peter Mortensen Oct 03 '22 at 02:32

3 Answers3

56

Between paragraphs you should set a margin for that element. Between lines within the paragraph you can use line-height. For example:

p {
  line-height: 32px;   /* within paragraph */
  margin-bottom: 30px; /* between paragraphs */
  }

enter image description here

David542
  • 104,438
  • 178
  • 489
  • 842
  • Outstandingly clear answer. I found out the updates I was making couldn't be seen while logged into Wordpress. Opening a new Incognito window in Chrome showed the updates as I refreshed. – Dan Dec 23 '16 at 00:00
6

Adding margin-bottom: 30px does the trick, but you are also more or less locked-in to spacing the next element below your last paragraph to also start with a 30px spacing. Spacing between paragraphs likely will match the line-height of the paragraph itself (or be close), which may be different from the spacing to the next type of element.

For example, say you have a dialog that has a paragraph at the end of the content area, and the next element is the footer area of the dialog (with action buttons). You wouldn't want to have to do some reverse negative margins if that created too much margin than what is expected between the content and footer of your dialog.

p {
    line-height: 32px;

    &:not(:last-child)  {
        margin-bottom: 30px;
    }
}

// or space on top with a sibling selector:
p {
    line-height: 30px;

    + p {
        margin-top: 32px;
    }
}
////
// or if your line-height and paragraph spacing is the same:
////
$p-line-height: 30px;

p {
    line-height: $p-line-height;

    &:not(:last-child)  {
        margin-bottom: $p-line-height;
    }
}

// w/ space on top:

p {
    line-height: $p-line-height;
    + p {
        margin-top: $p-line-height;
    }
}
Nate K
  • 240
  • 4
  • 11
  • Thank you! I did not know that CSS could apply that kind of logic (e.g., `&:not(:last-child)`). In TeX and Word I have often resorted to defining special "par-last" and "par first" styles. – August Feb 28 '22 at 07:28
  • Note that `&` is not standard CSS syntax. It is syntax intended for a CSS preprocessor like SASS or LESS. In the example above it's merely a shortcut indicating the nested parent (so it would compile to `p:not(:last-child)` in the first instance). – Chrisuu May 30 '23 at 17:07
2

When applying a margin to the bottom only, it may throw off other aspects of your design. I would recommend the following instead.

p {
  line-height: 15px;  
  margin: 15px 0;
}

Applying a margin to the top and bottom helps to keep things consistent. This is the code that I use. I have a background color that wraps around the text. When applying the paragraph margin to the bottom only, it made single paragraph lines stand out. Applying the margin to top and bottom evened things out.

jcfromkc
  • 65
  • 5