Hi friends, I'm stymied. I want to have space between my paragraphs in blocks of text, but don't find any setting in Design/Spacing to do this. For example, in Word I generally have a 12-point space between each paragraph. Is there a way to do that in SD, or do you just insert two carriage returns?

Thanks for your help!

Neil

By default the font-size in paragraphs is 16px. And the paragraphs also have 16px top and bottom margin. If you increase the text, those margins will also increase.

This means that the vertical space between paragraphs equals the height of the letters. If you give more height to those margins, you will get more vertical space. By increasing the margins, you don't automatically increase the font-size.

Be aware of one thing: when text and both those margins are 16px, it does not mean that you will have a gap of 32px between two paragraphs. The gap will be 16px. Margins that 'touch' each other like that will overlap.

Inger, thank you! That was the trick. I appreciate your help, as always.

Neil

Glad to help!

I'm grateful for that last paragraph of Inger's post. I'd hit that problem before and managed to work around it, not realising what lay behind what seemed to me a lack of logic when vertical margins meet.

There's a good article at https://css-tricks.com/what-you-should- … g-margins/ about this matter. It shows the rules about them, the reasons for the collapsing, and ways of preventing it.

Frank

Having both a top and a bottom margin on paragraphs, images etc can be a bit problematic, especially if you are working with multiple columns where the columns get filled with 'balancing' contents. I usually remove such top margins and use only the bottom margins. That helps in getting the top of the items in each column in a straight line horizontally.

Im confused

when I insert a paragraph there is only a bottom margin 16 px as default


are you talking about LINE Height?

are you even talking about Site Designer

It will be found in Site Designer Frameworkless that the default top and bottom margin settings of a paragraph element change according to the font size chosen for the paragraph. I guess that things are a bit different when different frameworks are used.

Frank

OK, I AM talking about SD. I'm talking about font size, not line-height.

When I first started to use the responsive site builders from CC, in 2016, I was using Foundation, and it was when I created my first components that I found that paragraphs had both top and bottom margins. The margins obviously have been changed since then, I remember discussing it with Alberto some 2(?) years ago. The font size I don't remember from that time, but I guess it was 16px since that was the recommended minimum size .

With time I felt a bit limited by the rules in Foundation (and the other frameworks), especially by the fixed breakpoints, so I started playing with Frameworkless.

When I wrote my first reply in this thread, I checked with Frameworkless, and what I wrote is correct for that 'layout system'. I forgot to check with the frameworks, sorry about that.

Now, Foundation and Bootstrap have no top margins on paragraphs, and the bottom margin does not change in sync with the font size, but Materialize behaves like Frameworkless both with the top margin and the increase of both margins when the font size gets increased.

Yes, as a follow-up to my original post, I was actually not able to create space between each paragraph in my blocks of text. The workaround I'm using is to insert a single carriage return. It works, just a bit clunky.