# Padding x and y conflict

**URL:** <https://community.weweb.io/t/padding-x-and-y-conflict/18070>\
**Category:** Ask us anything\
**Tags:** bug\
**Created:** [May 1, 2025, 12:27pm UTC](https://community.weweb.io/t/padding-x-and-y-conflict/18070 "2025-05-01T12:27:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![diegohenrique](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/diegohenrique/32/13433_2.png) [@diegohenrique](https://community.weweb.io/u/diegohenrique)\
**Post date:** [May 1, 2025, 12:27pm UTC](https://community.weweb.io/t/padding-x-and-y-conflict/18070/1 "2025-05-01T12:27:22Z")

</div>

Hello community!

I’d like to share a padding use case that’s causing a conflict. I’m creating utility classes for padding. One of these handles padding on the y-axis (left–right), and another handles padding on the x-axis (top–bottom). The problem is that if you configure only one of them in the property menu, the other is automatically set to 0. So if I have two classes—one for x and one for y—they end up conflicting. I’ll illustrate:

```auto
.spacing-p-y {
padding-left: 12px;
padding-right: 12px;
padding-top: 0px;
padding-bottom: 0px;
}

.spacing-p-x {
padding-left: 0px;
padding-right: 0px;
padding-top: 12px;
padding-bottom: 12px;
}

```

This is exactly what the padding property menu is doing, whether you assign x-y together or individually.

So, since the `spacing-p-x` class was applied last, my element’s left and right padding ends up being 0px instead of 12px.

You might think I could fix this in the CSS panel, but unfortunately there’s a bug here.

Imagine I assigned this property via CSS code. When I apply that class to the element, the CSS property does get the class’s code—but it remains marked as “unsaved.” In other words:

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/60ae1a70077f60c60ff63d667b47bfac8de70eed.png)

You can see the CSS label is gray, as if I hadn’t saved the change—even though I did. So if I remove the class, that CSS code stays behind, because the interface still thinks I’m editing it.

Furthermore, a class that sets `padding-top` and `padding-bottom` will simply overwrite all existing CSS code, rather than merging with the class that set `padding-left` and `padding-right`.

I hope the developers can address this issue.

---

<div class="post-metadata">

**Author:** ![diegohenrique](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/diegohenrique/32/13433_2.png) [@diegohenrique](https://community.weweb.io/u/diegohenrique)\
**Post date:** [May 2, 2025, 9:08am UTC](https://community.weweb.io/t/padding-x-and-y-conflict/18070/3 "2025-05-02T09:08:34Z")

</div>

Hey, Broberto. Hope you doing well.

As I mentioned, I used the menu padding at first, then tried to use CSS code. Haven’t succeed in any of them.

---

<div class="post-metadata">

**Author:** ![diegohenrique](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/diegohenrique/32/13433_2.png) [@diegohenrique](https://community.weweb.io/u/diegohenrique)\
**Post date:** [May 2, 2025, 11:54am UTC](https://community.weweb.io/t/padding-x-and-y-conflict/18070/4 "2025-05-02T11:54:17Z")

</div>

To simplify, a simple solution would be for the WeWeb panel to just not assign 0 to the measures I’m not defining.