Space round the elements added when using Components


I get unwanted space around elements when using components. See attached. I am using Tailwind 3.


Please, have a look at Tools & Helpers | Pinegrow Web Editor and select the documentation for Visual helpers.

I guess what you are looking for is Mark components.

Maybe in the front end there isn’t this space. You mean the margin all around? have you inspected the page while in firefox / chrome?

No extra space is added when a component is defined. This is a visual indication that can be turned off as described above.

No. The spaces are visible in browser. Inspecting element in browser doesen’t show any padding/margins. But space is visible nonetheless. There is no styling or classes on elements (links in this case) - and they should stick together.

When components are removed and the page refreshed the spaces are gone (in PG as well browser).

Instead of using Pinegrow’s browser preview, try closing Pinegrow and opening the page in an external browser from your file system to verify.

I’ll say it again, defining an element as a component does not add any extra CSS properties.

Anyway, do not hesitate to send us your project by following the instructions that you will find here: Contact Us | Pinegrow Web Editor

I understand that - that is why I am posting this as a bug. I removed the components … I will try to recreate it and send the project.


I just recreated your document, starting from a standard HTML template (with normalize.css though)

I am using tailwind 3. Didnt try anything else.

This is screen recording of the behaviour. I will send files.
Page 1 contains component definition, pages 2 and 3 contain instances.

Screen Recording 2022-09-06 at 14.54.00

There are too many unknowns here to help you effectively.

Can you show us the parameters of your components (the source code) as well as the source code of the pages on which you use the definitions.

Or just send us your project as soon as you wish and we will look into it.


link to files.

Thank you. Not an PG bug … but even more very puzzling.

Hm, still spending some time with this. What happens is this - when links are set on one line (on component define) … on refresh or project reload the formating in instances is changed - each link on new line.

That happens every time. Is there any formating setting in PG I am missing?

Yes, you can turn off auto-formatting in the Help → Settings dialog

Hm, thank you, but I dont think this relates well to this problem. I like to use auto formatting, and sometimes I need to have elements on the same line at the same time. Anyway it is not that big issue for me. I will use flex on div and that solves problem. It is just something that caught my eye.

Thanks for help