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
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?
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:
margin-top: 10px
padding-top: 10px
border-top-width: 1px
border-top-...color?: #2b2b2b
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

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

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