# \[BUG\] Perspective Flex Container Padding on buttons incorrectly applied

**URL:** <https://forum.inductiveautomation.com/t/bug-perspective-flex-container-padding-on-buttons-incorrectly-applied/53057>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [November 15, 2021, 4:08am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-container-padding-on-buttons-incorrectly-applied/53057 "2021-11-15T04:08:18Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 15, 2021, 4:08am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-container-padding-on-buttons-incorrectly-applied/53057/1 "2021-11-15T04:08:18Z")

</div>

v8.1.5

Padding applied to buttons affect the text instead of the whole button. I’m trying to add a border above the button which I would normally apply a padding-top and border-top-xxx, but padding in the case of a button just moves the text and the border applies on top of the button’s top edge instead of offset… I have to add the button into a flex container and apply is there instead

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/f/7f5850ca378a47316b30f46ab14be500d3b6d72e.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 15, 2021, 9:06am UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-container-padding-on-buttons-incorrectly-applied/53057/2 "2021-11-15T09:06:00Z")

</div>

Padding is applied to the button, but the text is centered so it causes it to go down if you also dont add a padding on the bottom, which seems like it should do.

What style are you trying to achieve?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 15, 2021, 12:17pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-container-padding-on-buttons-incorrectly-applied/53057/3 "2021-11-15T12:17:11Z")

</div>

I want from top to bottom: 10px gap, top border, 10px gap, button.  
Applying this style to a row flex container with just the button inside works:

```auto
margin-top: 10px
padding-top: 10px
border-top-width: 1px
border-top-...color?: #2b2b2b

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 15, 2021, 3:28pm UTC](https://forum.inductiveautomation.com/t/bug-perspective-flex-container-padding-on-buttons-incorrectly-applied/53057/4 "2021-11-15T15:28:37Z")

</div>

Padding will always include background color so its not ideal with a button.  
You maybe can mess around with box-shadow but its not ideal (it has the border rounding of the button)  
`box-shadow: 0px -10px white, 0px -15px #2b2b2b`  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/4/b4a1db43f76b07f5763bad4af0e8faa9011af7fe.png)

or use a background-clip to snip of the acces background, tho thats also hard to make work with the rounding xd  
`background-clip: content-box`  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/c/cc7aab1bc126c5134f0c1e1d91011c358b09e20f.png)

```auto
padding-top: 10px
border-top: #2b2b2b solid 10px
background-clip: content-box;

```

there is also outline but there you cant define it to be top only