Is there currently a way to set the spacing between paragraphs (ie margin before/after) within body text?
I don’t know what you mean. You want all the paragraphs inside of body to have margin before and after? Why not select a paragraph and add top and bottom margin?
Sorry I’m not sure how to explain this… I mean that I would like to set paragraph spaces within a P container. I don’t mean outside the P container as that would mean creating paragraph containers every time there’s a new paragraph within body text.
Here’s an example of what I’m working on. In this case I’ve had to use 2 paragraph containers to get the 8px margin
Oh I think you’re talking about increasing the Line Height of the text inside the Paragraph here:
Is this what you mean?
I think nah. I think he wants to use ENTER inside of paragraph as a new paragraph section and set the space between those two. It’s like you create one paragraph container and write inside it blabalbalbla (pressing enter) beqweqweqweqwe. And to make those two separate paragraphs.
But in this way paragraph container won’t make any sence. Why don’t you just simply select All paragraphs and set the margin-bottom to 8px?
Yep the html p element is really meant for one paragraph even though carriage returns are allowed it uses the line height setting for each carriage return. Just add bottom margin or padding and drop in another text block when needed.
2 Likes
Yep I thought that might be the case… It’s a bit limited if you’re working with copy for a page such as Terms and Conditions where you might have 20+ paragraphs, but I guess this is not really the purpose of Webflow. Hopefully it will be more flexible in the future 
@vector How would you expect it to work? I’d love to know so we can improve things. Are you expecting a new Paragraph to be created when you press enter while editing an existing paragraph? I’m still a little confused.
1 Like
Sorry I’m pretty new to all this! I checked the HTML and hitting enter within a paragraph section creates a br tag. Fair enough!
But say you wanted to paste this example in from Word (the paragraph space after is set to 6pt). So when you hit return, Word automatically places the 6pt margin at the bottom because it creates a new paragraph. Currently Webflow always creates a break (br) so it’s not possible to get the margin, unless you drag another paragraph section in.
You would have to copy each paragraph in separately to get the bottom margin, because Webflow takes out all p tags within the type and replaces them with br, whether you’re editing a div text block or a paragraph section.
Thanks for the explanation! Editing text in a Word document is a little different than for a website. As @pingram3541 said above, on the web every paragraph is actually a P tag.
You can go to this CNN article for example, right click on a paragraph and select Inspect Element. You will see that each paragraph is surrounded by a P tag. The reason for this is accessibility and easy editing.
So in Webflow you will have to create create as many P tags as you have paragraphs. It’s easier to drag just one in, Select it and copy paste it by pressing CTRL+C and CTRL+V (or CMD).
Does that help answer your question?
Yep that’s about it! I guess I was thinking paragraph blocks in Webflow were more like a WYSIWYG text editor in a CMS.
Thanks again for your help!
Totally! The problem with WYSIWYG text editors is that usually they create so much bloated code. We’re building our text editor from the ground up so you can be confident it will create clean code and nothing more. Thanks!
1 Like
Even though I know HTML, I got the WYSIWYG way of thinking all mixed up with p vs. br — Glad you explained it like this. I prefer thinking about every paragraph like a p tag now.
1 Like
Though I think webflow is one of the best instruments for not-webcoders so far, I found it surprisingly strange when it comes to text. And I’ve got the same problem Vector described — editing’s just no handy. So it would be lovely to have some parsing mechanism like this:
- Start paragraph.
- On double enter (or any other hotkey) split it into two paragraphs with same styling. Or press a button to split it on
<br><br>after you completed editing.
So basically we still get different paragraphs. But in the other, much easier way.
p.s. This is an old topic, so maybe I’m missing solution. If so, please point me at it.
1 Like
It’s a shame this is still not implemented.
Similar to how you have b/i/span/etc options within the P creation options. I would love to see the creation of h2-h6, list, and separation of paragraphs. Ideally it should create the associated tags automatically. Worth looking at the Wordpress WYSIWYG - it works.
Thought it might be worth reviving this topic now that the CMS is up and running.
I can give an example from a site I’m working on:
The site is going to feature articles and interviews, which means long passages of text with multiple paragraphs. Splitting the text up into multiple paragraph fields is cumbersome, so they need to be in a rich text field, which is also necessary due to the option for inline styling. In a rich text element however, the space equivalent to a (br) is inserted between each paragraph.
From a typographic perspective, the text would read better with a full line space between paragraphs. This will vary according to content however, so what’s needed is some custom control over the spacing between paragraphs.
I thought @thesergie might appreciate hearing this feedback. The new CMS is an incredible tool, features such as this could perhaps give it a final polish.?.
Hi @Maxwell! Thanks for the feedback. I’m a little confused by what you’re referring to. Currently the Rich Text creates separate paragraph elements. This makes it easier to style. Are you saying you would rather have <br>'s separating the paragraph blocks?
Hi @thesergie, I’ve had this problem too. I think the issue is because it’s not obvious how to set a paragraph class to the text within a rich text field. If you set a “p” sub-class on a rich text field, it doesn’t affect the text. And looking at the parent styles of the rich text field, there’s nothing that works either.
If you want to space the text inside a rich text field it seems you need to add margins to the global “All Paragraphs” class by creating an isolated paragraph field, adding a bottom margin, then deleting it again. I’m sure there’s a better way of doing this without affecting the entire site but I haven’t found it yet?
Hope this helps someone out!
Also, is there a way of using a bulleted list inside a rich text field? All I can do at present is define each item as a paragraph.
Thanks guys
might be a little disconnect here. In design applications, ie: photoshop, illustrator, indesign; there is a way to increase/decrease spacing in between paragraph breaks. This is created using a hard return (pressing enter while typing to generate a new paragraph). this is not to be confused with paragraph tags that indicate a divisions of copy in css/html. Im also wondering if this is possible, although it does not seem to be the case.