# Space round the elements added when using Components

**URL:** <https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900>\
**Category:** Bug Reports\
**Created:** [September 6, 2022, 10:02am UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900 "2022-09-06T10:02:00Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![veras](https://avatars.discourse-cdn.com/v4/letter/v/c57346/32.png) [@veras](https://forum.pinegrow.com/u/veras)\
**Post date:** [September 6, 2022, 10:02am UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/1 "2022-09-06T10:02:00Z")

</div>

Hello,

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

 ![Screenshot 2022-09-06 at 11.58.04](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/bfcb7bea442a7082cd8984111d1680bc7874b720.png)  
 ![Screenshot 2022-09-06 at 11.58.16](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/1a1c5679edd896080c07c43bb66db8188d687135.png)

Cheers

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [September 6, 2022, 11:47am UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/2 "2022-09-06T11:47:59Z")

</div>

Please, have a look at [Tools & Helpers | Pinegrow Web Editor](https://pinegrow.com/docs/master-pinegrow/tools-helpers/) and select the documentation for Visual helpers.

I guess what you are looking for is **Mark components**.

 ![master-tools-visual-helpers](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/448a948cfc1d00dae56cf12b07828c8eee61b34e.jpeg)

---

<div class="post-metadata">

**Author:** ![tytusie](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/tytusie/32/6914_2.png) [@tytusie](https://forum.pinegrow.com/u/tytusie)\
**Post date:** [September 6, 2022, 12:01pm UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/3 "2022-09-06T12:01:19Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [September 6, 2022, 12:15pm UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/4 "2022-09-06T12:15:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![veras](https://avatars.discourse-cdn.com/v4/letter/v/c57346/32.png) [@veras](https://forum.pinegrow.com/u/veras)\
**Post date:** [September 6, 2022, 12:22pm UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/5 "2022-09-06T12:22:53Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [September 6, 2022, 12:25pm UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/6 "2022-09-06T12:25:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [September 6, 2022, 12:29pm UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/7 "2022-09-06T12:29:27Z")

</div>

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](https://pinegrow.com/contact-us/)

---

<div class="post-metadata">

**Author:** ![veras](https://avatars.discourse-cdn.com/v4/letter/v/c57346/32.png) [@veras](https://forum.pinegrow.com/u/veras)\
**Post date:** [September 6, 2022, 12:32pm UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/8 "2022-09-06T12:32:58Z")

</div>

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.

Thanks

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [September 6, 2022, 12:44pm UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/9 "2022-09-06T12:44:16Z")

</div>

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

 ![SCR-20220906-kfp](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/4/4f696e63d6a0ea93fab6a8dfa94402b3ffc92b6a.jpeg)

---

<div class="post-metadata">

**Author:** ![veras](https://avatars.discourse-cdn.com/v4/letter/v/c57346/32.png) [@veras](https://forum.pinegrow.com/u/veras)\
**Post date:** [September 6, 2022, 1:01pm UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/10 "2022-09-06T13:01:17Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/b78767078710a25fed661c67c5c9eb5bf3dfd546.gif)

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [September 6, 2022, 1:14pm UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/11 "2022-09-06T13:14:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![veras](https://avatars.discourse-cdn.com/v4/letter/v/c57346/32.png) [@veras](https://forum.pinegrow.com/u/veras)\
**Post date:** [September 6, 2022, 1:33pm UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/12 "2022-09-06T13:33:07Z")

</div>

Sure:

[link to files.](https://we.tl/t-2JyAKNNwmX)

---

<div class="post-metadata">

**Author:** ![Emmanuel](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/emmanuel/32/6294_2.png) [@Emmanuel](https://forum.pinegrow.com/u/Emmanuel)\
**Post date:** [September 6, 2022, 2:05pm UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/13 "2022-09-06T14:05:46Z")

</div>



---

<div class="post-metadata">

**Author:** ![veras](https://avatars.discourse-cdn.com/v4/letter/v/c57346/32.png) [@veras](https://forum.pinegrow.com/u/veras)\
**Post date:** [September 6, 2022, 6:44pm UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/14 "2022-09-06T18:44:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![veras](https://avatars.discourse-cdn.com/v4/letter/v/c57346/32.png) [@veras](https://forum.pinegrow.com/u/veras)\
**Post date:** [September 6, 2022, 7:37pm UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/15 "2022-09-06T19:37:37Z")

</div>

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.

 ![Screenshot 2022-09-06 at 21.33.40](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/e/ef9aa445d99591ccf75afaa42ac469611f88989e.png)  
 ![Screenshot 2022-09-06 at 21.33.30](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/1/1d2ee67c3f57e392f8b24f76f8237f3a9ad57437.png)

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

---

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [September 7, 2022, 6:37am UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/16 "2022-09-07T06:37:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![veras](https://avatars.discourse-cdn.com/v4/letter/v/c57346/32.png) [@veras](https://forum.pinegrow.com/u/veras)\
**Post date:** [September 7, 2022, 7:19am UTC](https://forum.pinegrow.com/t/space-round-the-elements-added-when-using-components/6900/17 "2022-09-07T07:19:09Z")

</div>

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
