Changing spacing between paragraphs and inside of paragraphs

Question

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.

Answer 1

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 */
  }

Answer 2

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;
    }
}

Answer 3

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.