Build Your Own Business Website header image

Understanding Paragraph Spacing in WordPress

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we talk about how paragraph spacing works in WordPress and demonstrate how the spacing works. We discuss regular paragraph spacing, non breaking spaces and the <br> tag.

Video Transcript

Member: I was reading about this as well. It was kind of confusing but it did make sense once I finally read a blog post about how you can remove carriage returns on the code side but not on the visual side. You know what I’m talking about?

Rick: Well, depends on what you mean by carriage return…

Member: Okay.

Rick: There are essentially 3 things to consider when you think about a carriage return. There is just a paragraph. You go from paragraph to a paragraph so you have one thing wrapped in a p tag and your next paragraph is wrapped in another p tag. And there’s no special thing happening
there. The division between the two is caused by that margin. The next thing is a none breaking space. And WordPress, if you type a paragraph and you hit enter and hit enter again, WordPress automatically inserts a none breaking space which is a HTML special character and essentially produces a double space between the paragraphs. And then the 3rd thing is the br tag or the page break tag. And the br tag can look very similar to the none breaking space tag. And often, people will use the br tag to create space or to break a line or something like that. The none breaking space tag is really intended to say… okay, let’s say for example, you wanted this sentence to stop at will and stay to come down here to the next line. But you didn’t want a space in here. Let’s see, let’s edit that page.

Member: Okay.

Rick: Now in the visual view of this, if you did shift enter, that created a none breaking space.

Member: Yeah, I just… I learned about shift enter yesterday so right with you, I think. This is helpful.

Rick: So that creates a none breaking space and if we look at the page, there shouldn’t… there’s… oh, I guess I put it on every or, didn’t I? I did.

Member: It doesn’t matter. I know what you’re saying.

Rick: Okay so it didn’t actually create a new paragraph line, right? It just broke the line there. And however, let’s just delete that none breaking space. However, you could, if you press return, that’s going to create a new paragraph.

Member: Exactly, yeah.

Rick: And when we refresh that, now you have a paragraph in a paragraph.

Member: Absolutely. I’m with you.

Rick: If you hit return again, that creates a br tag.

Member: Alright.

Rick: If we hit update now, you’re going to have a larger space in between them. And if you look at the HTML, here’s our p there. Oh, it didn’t do that. It created a separate p tag instead. That might be way it’s interpreted… well, actually what it did is it put a none breaking space inside of the spaces. And WordPress has this function called auto paragraph or auto p, automatically takes a space like that and wraps the thing after it or before with a closing p tag and after it with an opening p tag and it automatically creates the p tag.

Member: But it doesn’t show that on the code side, on the code view.

Rick: No, you don’t’ see that on the code view.

Member: Exactly.

Rick: Now, you could, if you wished to… this is not going to change the way it looks.

Member: Right, exactly. It’s kind of a redundant. That’s what’s… it is underneath that WordPress… what I was reading about that was that was taken out, apparently, for just visual clarity because every line or paragraph would have to have all of that stuff in. Is that…. Rick: Yeah well, WordPress is intending for you not to really have to worry about HTML that much. And so it really wants to do all of the… I mean, that’s what the visual view is for really, is to do all of that for you.

Member: Okay, sure.

Rick: And so what that did was that put a none breaking space in between those p tags which essentially gave you that additional line.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment