4 Ways to Vertically Space Text in WordPressNovember 9, 2012
Spacing out text either to fit with pictures or for dramatic effect can be a bit tricky in the visual editor of WordPress. Here are four ways to space out paragraphs and text.
Press enter in the visual editor and a blank line appears. Keep typing and that will just be a new paragraph. The exact space between paragraphs in the finished blog post is defined by your theme. It is usually about the space of a full-height blank line.
Most of the time it makes sense to have things in paragraphs. Text in paragraphs will flow around pictures in the post and the spacing for normal text is usually comfortable.
2) Paragraph Placeholders in HTML Editor
Sometimes you just want “a lot” of space between two paragraphs. If you just hit enter a few times in your visual editor you will create several “empty” paragraphs. Since each paragraph takes up space, multiple of them will show a fair gap and perhaps give you the effect you are looking for.
If you look at this in the HTML you see that the paragraphs are not actually empty. By hitting enter several times you get a bit of text that looks like this “ ” with blank lines on either side. The blank lines mean that the line will have its own paragraph. is the HTML code for Non-Breaking-SPace. It essentially is code for a space. But because it is actually text in the HTML, it can be its own paragraph.
3) Line Breaks
Sometimes you just want to have the text on the next line. In the visual editor, just pressing enter at the end of a line will create a new paragraph. Depending on the theme, this could be a fair amount of blank space.
If you just want the text to start on the next line, press shift+enter. This will add a line-break and no extra space. This only works for a single line break. If you add more than one, WordPress will still make it into a new paragraph.
4) Spacing with CSS
If you want a more exact amount of space between your paragraphs, either to line up with pictures or for dramatic effect you need to head into the HTML editor. Here you see the text that you typed into the visual editor. Any full blank lines in this view will mean that the text blocks on either side will be put into paragraphs for the final post by WordPress. If you press enter in this view, you get the line-break that the shift+enter in the visual editor gave you. It just looks like a line-break in the HTML editor.
You can explicitly add paragraph HTML tags to the HTML editor if you want to add specific spacing. Pick the block of text that you want to affect. It should have a blank line above and below it in the HTML editor. Add the following code above that block:
and the following below that block of text:
Make sure you get the <> characters and that you are pasting it into the HTML editor, not the visual one.
The style attribute allows you to style that one paragraph (the p element) in a specific way. Margin means there must be at least this amount of space between elements. So margin-top:20px; would ensure that 20 pixels of space was between this paragraph and the one above, while margin-bottom:40px; would ensure that at least 40 pixels of space were to the next paragraph below. Of course play with these numbers until you get the effect you want. If you only want to put spacing above or below the paragraph, just delete the margin you do not need.
This is a good way to affect a few paragraphs in a single post. If you want more space between your paragraphs in every post on the blog, you are better off changing it in the theme itself. Definitely seek out help if you are not comfortable with your theme.
Vertically spacing out text in WordPress is actually quite easy. An enter in the visual editor will create a new paragraph with some theme-specific spacing. Shift+enter will create a simple line-break. With a tiny bit of CSS magic in the HTML editor you can set the spacing to the exact pixel amount you need.