# Padding and margins settings (not) working for accordion component

**URL:** <https://forums.realmacsoftware.com/t/padding-and-margins-settings-not-working-for-accordion-component/45296>\
**Category:** Elements API\
**Created:** [November 17, 2024, 6:54am UTC](https://forums.realmacsoftware.com/t/padding-and-margins-settings-not-working-for-accordion-component/45296 "2024-11-17T06:54:56Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\
**Post date:** [November 17, 2024, 6:54am UTC](https://forums.realmacsoftware.com/t/padding-and-margins-settings-not-working-for-accordion-component/45296/1 "2024-11-17T06:54:56Z")

</div>

I have a custom component where the margin and padding settings for the top don’t seem to work. All other options (left, right, bottom) do work. The issue occurs in every section of the custom component where margin and padding options are available.

 ![margin_padding](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/c/cc94711f036bde8d943f1078c15a7d8712b0391e.jpeg)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [November 17, 2024, 10:48am UTC](https://forums.realmacsoftware.com/t/padding-and-margins-settings-not-working-for-accordion-component/45296/2 "2024-11-17T10:48:12Z")

</div>

Hmm, hard to fix without seeing the custom component code… I’m thinking it’s a coding error, perhaps in the HTML Template…

---

<div class="post-metadata">

**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\
**Post date:** [November 17, 2024, 7:08pm UTC](https://forums.realmacsoftware.com/t/padding-and-margins-settings-not-working-for-accordion-component/45296/3 "2024-11-17T19:08:02Z")

</div>

It was a code error both for the margin top settings and the padding top settings. But the solution was different:

Margins work with the original structure:  
“format”: “m-{{value}}”

Paddings now work with the explicit format for each direction:  
“format”: {  
“top”: “pt-{{value}}”,  
“right”: “pr-{{value}}”,  
“bottom”: “pb-{{value}}”,  
“left”: “pl-{{value}}”  
}

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [November 18, 2024, 9:55am UTC](https://forums.realmacsoftware.com/t/padding-and-margins-settings-not-working-for-accordion-component/45296/4 "2024-11-18T09:55:27Z")

</div>

> [@Bartje](#):
>
> “format”: {  
> “top”: “pt-{{value}}”,  
> “right”: “pr-{{value}}”,  
> “bottom”: “pb-{{value}}”,  
> “left”: “pl-{{value}}”  
> }

This is not valid code for setting a format on a control property.

In this case, rather than using `format`, you need to set the correct `mode` on the `themeSpacing` controls for Margin and Padding – Elements will then correctly format the control output with the appropriate Tailwind classes.

Here’s a working example for margin and spacing controls:

```json
{
  "title": "Margin",
  "id": "margin",
  "themeSpacing": {
    "mode": "margin",
    "default": {
      "base": {
        "top": "0",
        "right": "0",
        "bottom": "0",
        "left": "0"
      }
    }
  },
},
{
  "title": "Padding",
  "id": "padding",
  "themeSpacing": {
    "mode": "padding",
    "default": {
      "base": {
        "top": "0",
        "right": "0",
        "bottom": "0",
        "left": "0"
      }
    }
  },
}

```

If you’re still having trouble, please paste in your properties file so we can take a look 🙂

---

<div class="post-metadata">

**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\
**Post date:** [November 18, 2024, 8:55pm UTC](https://forums.realmacsoftware.com/t/padding-and-margins-settings-not-working-for-accordion-component/45296/6 "2024-11-18T20:55:34Z")

</div>

After a lot of trial and error and with the help of Claude, my AI budler, I have an accordion component working with the possibilities to style the header (text and box), the arrow and the content area 😅

 ![Close](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/f/6f43f9af3a55bca825f2eee93fbe1abbb17187cd.jpeg)  
 ![Open](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/c/2/c2c471eb3c6b1480c160cc1977227eafa8f0c1eb.jpeg)  
 ![pane](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/7/4/74fea16f8597901be0c23d9e299187cac4f9b957.jpeg)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [November 18, 2024, 10:19pm UTC](https://forums.realmacsoftware.com/t/padding-and-margins-settings-not-working-for-accordion-component/45296/7 "2024-11-18T22:19:55Z")

</div>

I’m so pleased you’re able to build the components you need — this is really impressive stuff!

---

<div class="post-metadata">

**Author:** ![Bartje](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/bartje/32/1210_2.png) [@Bartje](https://forums.realmacsoftware.com/u/Bartje)\
**Post date:** [November 18, 2024, 10:39pm UTC](https://forums.realmacsoftware.com/t/padding-and-margins-settings-not-working-for-accordion-component/45296/8 "2024-11-18T22:39:13Z")

</div>

Thank you for the encouraging words, but all the credit really goes to the RW team and the way Elements is taking shape more and more.

The regular adjustments and refinements based on beta tester feedback, and especially the great communication about the development of Elements and the weekly videos, make it very appealing for users like me—who know nothing about JSON and just a little HTML—to still get started using AI tools to create something themselves.

And the fact that we’re still in the beta phase suggests that there’s a lot more great stuff to come. 😃