Paragraph breaks and blank lines
Pressing return in the visual editor gives a line break plus a blank line. If you want a line break only, you press shift-return. In the html editor, pressing return once gives a line break, pressing it twice gives a line break plus a blank line.
If you want more blank space between paragraphs, you cannot do it by pressing return repeatedly, because the HTML web standard is no multiple line breaks (no multiple spaces either). You need to add padding or margin to your paragraph in the HTML post or page editor.[*] You can add it above a paragraph, or below it, or both; change the number to adjust the amount of extra space:
(Or write margin in place of padding).
To add extra space below and/or above larger sections comprising more than one paragraph, you use div and /div in place of p and /p.
For extra space above and below an image, you add this to the image code, after “img” (again, adjust by changing the numbers):
Or, in the visual editor: click image, click edit button (mountain icon), click Advanced Settings, type number in the “Vertical space” box, click Update, update post or page.
[*] In text widgets you can use a simpler alternative (see here). In the post or page editor, avoid solutions such as div or p tags enclosing nothing (or enclosing a space, or enclosing the html for a space): they are stripped out if you switch the editor to visual.
To set text alignment, you can highlight the text in the visual post or page editor and click the relevant button (for the function of all the buttons of the visual editor see here).
But this isn’t always safe, among other reasons because in the visual editor you cannot see or control exactly what you’re selecting. In the html editor, the code for setting the alignment of a single paragraph is this:
Where I’ve put DEFINE, you write left, right, center or justify. Usually you don’t need to specify left alignment, since that’s the default (when the blog language is set to English or any other left-to-right language).
For more than one paragraph, you write div and /div in place of p and /p. Or you use this code (again DEFINE should be left, right, center or justify):
Note on coding: when you want to apply multiple commands to the same chunk of text, you combine the relevant pieces of code within the same “div” or “p” tag. For example:
To have text wrapping around an image, you don’t interfere with the text: you set the image alignment to either left or right.
You can specify that when you initially insert an image. You can also change the alignment of an already inserted image: in the visual editor, you click on the image, click the edit button (the mountain icon), click the desired alignment option, click Update; in the html editor, you modify the relevant part of the image code (“alignnone”, “aligncenter”, “alignleft”, “alignright”).
In some themes you automatically get some space around images; in other themes you get no such space, which means that text wrapping around images will stick too close to them. In that case you must add space yourself: in the visual editor, you click on the image, click the edit button, click “Advanced Settings”, set a number in the “Horizontal space” box, click Update; in the html editor, you add this inside the image code (with a space before and a space after):
(Of course margin-right is for a left-aligned image; for a right-aligned image you use margin-left; and the number is just an example – you can change it.)
For text wrapping around a video, see here; for text wrapping around a poll or a gallery, see here.
Setting the alignment of an image to left or right means that the rest of the content will wrap around. So:
a) The image needs to be at the beginning of the paragraph that should wrap around.
b) If you only want a short paragraph next to the image, and the rest of the text below the image, you need to add this after that paragraph:
<div style="clear: both;"></div>
Two columns (or more)
The simplest way (for fixed-width themes) is this:
LEFT CONTENT HERE
RIGHT CONTENT HERE
<div style="clear: both;"></div>
You can change the percentages, to adjust the amount of blank space between the columns, or to create columns of unequal width; make sure the sum remains lower than 100%.
On flexible-width themes you’d better use this:
LEFT CONTENT HERE
RIGHT CONTENT HERE
<div style="clear: both;"></div>
You can change the padding numbers, to adjust the amount of blank space between the columns; or you can change the percentages, to create columns of unequal width; make sure their sum remains 100%.
The same type of coding can be used to create more than two columns: setting all the divs that define each column to float left (with appropriate width percentages) will make all of them show up side by side.
Hi Pan-it’s me (jj) wearing my other wp persona here. Just wondering why when I click on the “comments” link on your front page it brings up a 404 error, as it does here on the Post page itself. Odd.
Also wished I’d known the above when I was moving over my knitting site to wp.com. Very helpful, as always.
@yarnaholic: Because the link is not the original one of the theme; it’s hand-crafted, and this time I forgot to paste the URL. These posts involve a lot of copy-pasting, and I may miss a step here and there before I have the chance to check things again. Thanks for pointing out!
(And what’s your opinion on the above pingback?)
Three pages of entries for 10 June 09. Yours is currently on the second. But, it looks harmless and it’s a link. Of course now I’ve given that blog 4 hits…
Didn’t look around much, so I can’t tell if it’s a legitimate aggregator or just splogging. But I’ve seen to it anyway, I think: all my posts start with an invisible blog URL (shows in the RSS).
Definitely looks to be an RSS aggregator, but … why? Been around since 2003 and it doesn’t have an ad on it anywhere!? Color me amazed.
line-height don’t work, dunno why
@delk: Can’t tell without a link to a relevant post.
Where do we paste the content for two columns as you suggest above, I’m new to WordPress…
@Hinshaw: The post editor has two modes, Visual and HTML (you toggle between them via the tabs above the main text box). Visual is where you see approximately what you’ll get in the published post; HTML is the code for what you see. All the codes I give in my posts are meant to be pasted in the HTML editor.
Shouldn’t that be top and bottom rather than left and right?
Gasp – yes of course! I’m surprised that this (you know, the familiar copy-paste-and-forget-to-edit effect) has been sitting there for six months. Thanks once again!
Thank you! I have tried all the other solutions out there. Nothing had worked. This works well!
@cv: You’re welcome! (My post includes several suggestions, so which one is “this”?)
Awesome code! i have been looking all over for the code to make columns. Very nice, you have all the different types of columns I need.
Can you please please tell me how to keep WordPress from wrapping text around a Left justified picture? No amount of padding or borders will keep this from happening, and it’s driving all of us crazy! Why is this the default? I’d just like the picture alone, without text on its right margin. Is this too much to ask?
@Jerome: No it’s not too much to ask, it’s html in general, not WP, and it’s simple. The whole point of left or right alignment is wrapping around; for an image placed left but with no text-wrap, you set the alignment to none.
Thank you! I was having a terrible time trying to format my poems–I didn’t know all I had to do was just hold down the shift button while I hit enter!
Buttons / tiny banners in the footer of my blog are set vertically.
How to make one button parallel with the others (horizontally) before moving to the bottom. There are lots of empty space in the right area.
@Mufi: The simplest solution for placing them in rows of two is a table; basic form:
<tr><td>BANNER1 CODE HERE</td><td>BANNER2 CODE HERE</td></tr>
<tr><td>BANNER3 CODE HERE</td><td>BANNER4 CODE HERE</td></tr>
Placement and distances can be changed via additional commands, but I can’t use the theme you’re using, so just try this first, see if it works, tell me what adjustments you’d like.
Might look better if you enclose the whole thing in a box. See bottom of my right sidebar for a specimen and let me know if you’re interested in something like that.
Thank you very much. I’ve been looking for hours for a way to introduce an empty space between things within Word Press. All forums were talking about CSS, Br, P and other tags and nothing worked. Finally, I have found it!!!
Thank you again. Why does it sometimes take such a long time to find sth really good?
@Kamil: You’re welcome!
Why does it sometimes take long? Well, I think it’s because you’ll find countless webpages if you google for stuff like that, and because some of them are amateurish, slapdash, or outdated, or apply to different platforms.
You need to explain more on where to put this code, if I place into a post it just shows it……
Do I need to place it into the coding file that the page is sitting in?
@Wa!: In the html post or page editor (as the post says).
Wow! Thanks a million times! I am not an html mogul, but I had to do something that requires me to have two columns on a page on my wordpress/website and your advice save my day! I know it’s pretty simple… but Thanks again and have a great day!
@Pierre-Luc: You’re welcome and I’m glad the post was of help!
I usually like to see how my suggestions are applied; care to link to the page in question?
Here it is:
It’s in French, don’t be afraid!
(You were absolutely right when you said the page “required” two columns: would have looked quite unprofessional without that.)
Hope you’re the oasis in the desert of html hell. I’ve been trying for several weeks to add extra white space between paragraphs, above & below headers etc. I have tried your suggestions with no luck. I tried padding above/below, I’ve used div, hitting return, enter, etc. … And the weirdest things happen … I can save the page, it looks perfect, then I do a bit more work, like adding more text somewhere else on the page, or going to another page/post, save it again and all the html padding etc is stripped out and the spacing is gone. ARGH! I’m currently working on the page “E & S Test”. Another weird thing … on “Events & Shows” (different page) … last year, somehow, I was able to get a serif font (you can see it on the items near the bottom.) Try as I might I can’t get this again … just the default font for WP. Is there anything you might suggest other than valium? Thanks, Sally (I live in hope for an answer ;-) )
(begging pardon of Panos ≥^!^≤ ~panos, go ahead and answer questions on my blog too~)
but it looks as though you are using pre-formatted text to make your page?
@Sally: Tess is right, it seems that some of your content has been directly transferred from another code-rich source (Word?), which is (or rather was) a no-no. But your html is very messy in other ways too.
Some preliminary suggestions:
a) Go to Settings>Writing and enable the option “WordPress should correct invalidly nested XHTML automatically”, so that any unclosed tags (you’ve got several) will be taken care of when you do more editing.
b) Don’t use the buttons of the editor for multiple operations on the same text.
c) “span” is for words or phrases within a paragraph. Use “p” for a complete paragraph, “div” for more than one paragraph.
d) For font sizes, use percentages, not px.
e) Don’t use multiple tags for the same text. For instance, instead of something like this:
<p style="padding-left:30px;"><span style="color:#0da4f1;"><big>HEADING HERE</big></span></p>
<p style="font-size:150%;color:#0da4f1;padding-left:30px;">HEADING HERE</p>
I can’t correct everything in those two pages – too many things to prune or change. Instead I’d say publish a new test page, put nothing but plain text in it, tell me how exactly you’d like it to be, and then I suggest ways to do it (could be done via comments on that page, comments which you will then delete).
In the meantime have a look at this too:
Zowie! IYou must be wearing your Superman outfit …. cause you just solved all my problems. (Okay, not all my problems, but at least the ones I was having with html.)
Your web site is a gold mine … I’m now a happy little html’er. And the page looks oh-so-much better.
A big bucket of hugs to you. Thanks to Tess as well for her ideas.
Wow! I just checked the source code of your page: my compliments on doing all the pruning and changing successfully yourself!
You Sir, are a legend!…at least for the time being. :)
Your suggestion of;
ANY CHARACTER HERE
has sorted my html paragraph break problem out perfectly.
Thank you very much Panos!
Oops, going to have to double post here. Seems the code has been taken out of my last post – will have to reword. The upper most suggestion on the page was the one I was referring to.
@JD: You’re welcome! The invisible-character solution is the only stable one for blank space: as I mention in the post, the WP editor tends to strip out no-content sections.
PS The code you pasted was stripped out because visitors are allowed very little html in comments (links, bold, italics and a few other things). But if it wasn’t stripped out, again it wouldn’t display: it would produce the result it’s meant to produce. To display code in a comment, the easy solution is to enclose it in the “sourcecode” shortcode.
just learned how to break line in wp, thx for all.
@murato: You’re welcome!
You’re a life saver! I have a blog in WordPress and I was getting so frustrated with trying every single code I found on the web to get a blank line that would not disappear!
Your code is the only that works and STAYS!
@Jungle: You’re welcome! Yes it’s the only one that stays, because it’s got some content; invisible, but content nevertheless.
This page has helped me a lot, especially “Paragraph breaks and blank lines.”
Hi merillion, and you’re welcome!
One more solition here:
@meekman: Thanks (although my blog is about wp.com blogs)!
this is great! thanks for posting this…
@stuart: You’re welcome! (This is one of my most popular posts, because a lot of users justifiably search for solutions to these classic problems.)
Is it possible to put this code somewhere in the template so that i automaticaly have two columns when i open a new post?
@Ojuls: As far as I know, no. All these codes have to do with formatting specific portions of the actual content you type in: even if you could put the code “somewhere in the template”, the post editor wouldn’t know about it.
Users occasionally ask for improvements to the editor that would allow you to add something automatically (for instance a copyright notice); so far nothing of the sort is possible.
Thanks! The part about creating columns with divs saved my sanity. Perhaps you can help with a related issue. How can I get rid of a blank line between to lines of text that are formatted differently in a post? For example:
I want to get rid of the blank line that appears between my Heading, Description and Text when I publish the post.
Hi. I probably can, but I need to see the published post first, so I can check its source code and see exactly how you have formatted it. Or you can paste the relevant part here; to make the code show up, paste it like this:
Hi Panos, Here’s a page with an example of what I’m talking about: http://fgmea.org/photos I want to get rid of the blank line between “Photo Gallery” and “Click image to enlarge….” Here’s what I have in my HTML editor for this page:
Click image to enlarge. Press F11 for full-screen view.
<h5>Winter Concert at Pine Spring ES (submitted by Christina Matula)[nggallery id=6]</h5>
<h5>Medieval Day at Freedom Hill ES (submitted by Gretchen Lynch)[nggallery id=7]</h5>
BTW, I clicked to 2 “notify me” boxes below, and received confirmation e-mails, but the confirm link in each was dead.
One way to do it is by applying negative margins to the middle line:
<p style="margin-top:-24px;margin-bottom:-6px;">Click image to enlarge. Press F11 for full-screen view.</p>
<h5>Winter Concert at Pine Spring ES (submitted by Christina Matula)</h5>
Another way is by adjusting the line-height of each line:
<h2 style="height:12px;">Photo Gallery</h2>
<p style="height:14px;">Click image to enlarge. Press F11 for full-screen view.</p>
There are other ways too, but those two should be enough. All px numbers above are arbitrary examples: play with them till you get the spacing you prefer.
Wow, so simple! Both methods have their uses. The ability to tweak the numbers is really nice. Really simple for this particular instance, http://fgmea.org/photos , a -15 top margin for the second line of text is all I need:
<p style="margin-top:-15px;">Click image to enlarge. Press F11 for full-screen view.</p>
Everything else falls where is needs to. Thank you, thank you! I noticed I can also move my page title closer to the top of the page, but I’m guessing I should edit my template for something like that. I have much to learn and have been learning a lot in the past 24 hours from your excellent articles. Kudos!
@Rod: You’re welcome and thanks!
very helpful indeed. i find it a bit strange that wordpress is not able to accept the blank line by default which make things very hard to align.
@JKR: Yes it feels strange to anyone accustomed to typing and using text editing applications. But it’s not a limitation in WP in particular, it’s the HTML web standard: no multiple returns, no multiple spaces.
You’re a genius! Tried five different ways to get columns that had embedded jquery code in them, and yours was finally the one that worked! I had to throw in some extra ‘s for reasons I still can’t figure out, but twenty minutes of tinkering got it working. Thank you. (You can check it out at http://www.carbonlighthouse.org/carbon-calculator).
@brenden: You’re welcome! And you were right in going for two columns: makes for a more professional-looking page.
What should the normal px spacing between paragraphs be for the Fusion theme?
Thank you so much for your help. Because of your answers and the info I find here, I am finally able to get my blog looking normal after moving from blog spot.
But I’m afraid I don’t understand your question – please explain.
Sorry. Maybe I don’t understand what I am asking…
I’m using your code at the top of this page that specifies 14 px.for padding between paragraphs. I know I can change the number, but I don’t know how to measure px. How much space (px?) should there be between paragraphs for Fusion theme? When I use 14, it is too much. I’m playing around with it, decreasing in increments, but I wonder what is correct for Fusion.
Ah I see.
a) 1px (pixel) is the smallest you can have in a webpage or a digital image: as an example, the borders around my code specimens are 1px thick.
b) The numbers in those specimens are arbitrary examples.
c) The codes for padding etc. are useful if for some reason you need more space than the default for paragraph breaks, for instance to separate a section or a chapter from another. It’s completely up to you: there’s no “correct”, and no “correct for Fusion”. You can link to an example and I can tell you if I think it looks ok, but it will just be my opinion and nothing more than that.
Great!. If the spacing looks good to me, that’s good enough to go with.
is there any code for 3 row x 3 columns, all 9 cells r having diffrerent background colors ?
Of course. The basic form of a 3×3 table is this:
For different bg colors, turn all of these:
(HEX being the color code you need in each case.)
You may need further improvements (padding, text color, border color – can’t tell before I see the actual thing).
thanx a lot. it worked…. [link to post]
now what could be the solution to change the text color, making it bold/underline/italics etc.
You’re welcome. The link links to a private blog so I can’t see it.
For the changes you want, see “Formatting Text” pts 4 & 5 in my left sidebar.
o.k. thanxs a lot
How do I effectively use the coding for an RSS feed widget that pulls in article titles based on category tag? As you can see here: http://cyclewriteblog.wordpress.com/ , it’s pretty annoying that Misty Look template, the widget squashes all the citations together.
I’m afraid you can’t change the way it looks unless you buy the CSS Upgrade.
Your other option is a text widget: can be styled anyway you like, but you’ll have to update it manually.
Thx for your response.
You’re welcome – sorry it’s not the one you would have preferred!
Hi Panos, thanks for the code!
I have a query you might be able to help with.
Is it possible to place a line separator between two columns? What would I have to add to the code?
Thanks in advance!
Of course it’s possible: you just need to add a right or left border to the left or right column, respectively. See here:
Or link to the post or page in question so I can see which one of my suggestions you’re using and give a more precise answer.
All I wanted was an extra line space ;-)
After trying p, span and div unsuccessfully (yes, I did see the tip, above) I landed here through the wp forums and have solved my problem. Thanks for this wealth of information!
You’re welcome, shoreacres!
merci pour tes partage de codes, avec 2 ou 3 je suis arrivé à faire kon puisse ecrire sur une image ou un fond, avec ton code 2 colonne j’ai transformé les %, ça fais ke la colonne de droite se met sur celle de gauche
merci pour cette grande connaissances tres utile
je voulais juste te signaler kon peut plus mettre de code gigya dans les commentaires, saurais tu pourquoi????
I’m having difficulty with WordPress adding extra space between lines of an unordered list, UL, every time it saves a draft. I close up the tags and WordPress puts them back in, adding blank lines where I don’t want them! I’m handy with CSS and HTML but this problem is aggravating. Isn’t there a setting that can be changed so WordPress doesn’t add blank lines and reads the HTML literally? Suggestions?
@LGR: You’re welcome. But my french is limited, and I’m not sure I understand your question: try in English very very please!
@Pamela: My blog is about wp.com blogs (as my tagline says) while yours is self-hosted – different software, different theme versions. But anyway link to a concrete example so I can see your HTML; or show me an example of the HTML you’re trying to use (paste it here using the sourcecode shortcode, or paste it here after you convert it in an Html converter*, or paste it in Textsnip* and give me the URL you’ll get).
* See Links 1 in my left sidebar.
Hi again! My blog is hosted through Yahoo which has some sort of intricate relationship with WordPress so that it’s just like being at the “real” WordPress with a not-very-invasive front end.
I finally figured out a working solution to the line spacing issue with unordered lists. WordPress was doing awful things, reformatting every time it auto-saved, whether I liked it or not. The solution appears to be to style every LI element. Here’s a page with which I’m satisfied:
Your blog is very helpful, and I will be back!
Still, ‘your’ WordPress isn’t ‘our’ WordPress. For example, a plain unordered list in ‘our’ Twenty-Ten produces no space at all between list items, not blank lines.
But the point is that a plain list will adopt whatever the CSS of the theme dictates for lists. So you’re right, if you want absolute control over every detail re spacing etc, the only solution is adding style to your li tags.
To whomever shared all this code (in brown above), THANK YOU!! You did a great job of simplifying how to create columns.
“Whomever” is me, and my blog exists for sharing and helping: I’m an experienced volunteer in the wp.com forum (specializing in HTML and a few other things), and this blog is a direct outcome of my involvement there.
Hello. I’m using WP 3.04 and the Thesis theme (not sure if that detail matters or not). On my “product” pages, I’ve created a 75% width table that I want to center on the page.
I’ve found the to work well, but when I switch into the “Visual” mode and then back to HTML, WordPress auto-changes it back to just .
Is there a way to turn “OFF” this default in WP, or is there a better TAG that WP won’t change.
Thanks so much!
Sorry, I didn’t know this blog would drop my tag reference. Here it is again:
I’ve found the [DIV align=”center” tag] to work well, but when I switch to Visual view, WP changes it back to [DIV].
As my tagline says, my blog is about wp.com blogs while yours is self-hosted.: we don’t have he same software, and I can’t use the theme you’re using to test things. On the other hand, this is a general HTML question, so:
a) align=”center” is deprecated. You can try one of these instead:
b) Since you have a fixed-width main column, you could center a table without enclosing it in extra div tags – just by displacing it to the right:
<table style="[etc etc];margin-left:146px;">
c) But why on earth are you using table coding for normal one-column text?
Hey thanks, yes, I guess I didn’t check that closely what kind of WordPress environment you were supporting here, please pardon the mix-up.
I did want to get back to you and say that I did SOLVE my issue by implementing the following HTML change:
1. I removed the [div align=”center”] tag . . . which worked, but kept getting removed automatically by WP.
2. I replaced that with this table tag:
[table style=”text-align: left; width: 75%; margin: auto;”]
The key was that “margin: auto;” at the end.
And now everything works as I wanted and it doesn’t auto change my code when I switch to the “Visual” tab.
You asked why I would choose a table, well, it served multiple functions as I often had multiple images I needed to embed in the text – in one table row, thus I did actually have multiple columns. This design seemed easiest for a novice HTML person like me. :-)
PS: By chance, I think I also discovered why WordPress was auto-changing my code. [In “Settings : Writing” in the “Formatting” section, there is an option to “WordPress should correct invalidly nested XHTML automatically”. This was checked ON.
I suppose having it correct bad XHTML is good thing, but now I know where the auto-fixing was coming from.
Cheers and thank you for sharing your knowledge with the world!
No, the align=”center” isn’t removed because of that option: it’s removed because it’s deprecated and some themes don’t accept it.
That option corrects tags left unclosed. So yes, keep it on and you’ll never see your whole page turn bold or your sidebar at the bottom.
You’re right, for a row of images you need a table; but you can use a table for that row of images alone – no need to include the rest of the text.
Thank you, this was incredibly clear, concise, and helpful!
You’re welcome and thanks, Becca!
I’m trying to do two columns in a post and have text above and below the two columns. I am using the table solution but the columns aren’t spaced evenly on the page like if you use the div tags. Is there a way to set a percentage of space each column uses within the table?
Yes of course, but I need a link to the blog in question.
Hi, pressing return in visual editor isn’t giving me any space between lines.
What am I doing wrong?
Assuming you’re talking about a wp.COM blog, make sure the Format tool (row 2 button 1) is set to Paragraph.
Thank you. Big help!
@Nina Amelia: You’re welcome!
Wow. Thanks so much for the two column text layout solution.
Very elegant and does not rely on editing PHP or CSS code. Will work in any theme.
It looks like three of four columns are possible with this method plus doing a custom rail.
[Username link to commercial site removed – P.]
THANK YOU FOR THE TWO COLUMN CODING!!!
Well, you’re welcome!
Thanks for the help. I really needed it. I haven’t used HTML in ages and I couldn’t remember how to add blank lines. You are a lifesaver!
You’re welcome Shari!
Thank you! I have been battling for the past 3 days with a page break that I cannot get to work, I used your columns format instead, and finally I have peace :-), not to mention a page that works.
[Username link to non wp.com site removed – P.]
What’s the page in question?
Hello, I have a site under construction and the body of each page is in 2 columns: text on left and graphics, etc on right. I was editing text in the left column on one of the pages and somehow inadvertently made the graphic shift to the left now in between two paragraphs of text. I don’t know how this has happened. What can I do to rectify it?
I would welcome your expert advice, please!
But your blog is set to private: can’t help if I can’t see the problem!
How would you set it up for two columns and multiple rows using div tags? It seems not to line up that well side by side.
Depends on the content. Can’t answer that without a link to a post with the problem in question.