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.

Rawley

You should fix your header, it's overlapping with the content. – Selfsatisfaction

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.". – Ichthyosis

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

Salesin

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. – Rawley

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

Armendariz

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. – Polygamist

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). – Sentimentalize

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.

Mornay