CSS problem with padding shorthand vs 4 line code

Question

first of all, thx for coming here, Today I encountered a very strange CSS behaviour as you can see in the snippet:

/* padding: 0.5rem,2rem,0.5rem,2rem; this line is not working*/
/* while these do:*/
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-right: 2rem;
padding-left: 2rem;

can somebody explain me why? BTW I am styling buttons using this code

full styling of button:

 .banner__button{ cursor: pointer; outline: none; border: none; color: white; font-weight: 700; border-radius: 0.2vw; /* padding: 0.5rem,2rem,0.5rem,2rem; */ padding-top: 0.5rem; padding-bottom: 0.5rem; padding-right: 2rem; padding-left: 2rem; margin-right: 1rem; background-color: rgba(51, 51, 51, 0.5); }

Answer 1

When using shorthand syntax to define the padding for an element, you don't need commas between each value. It should just be space separated like this:

padding: top right bottom left;

 .banner__button{ cursor: pointer; outline: none; border: none; color: white; font-weight: 700; border-radius: 0.2vw; padding: 0.5rem 2rem 0.5rem 2rem; /*padding-top: 0.5rem; padding-bottom: 0.5rem; padding-right: 2rem; padding-left: 2rem;*/ margin-right: 1rem; background-color: rgba(51, 51, 51, 0.5); }

Answer 2

You are adding wrong css. Please check below.

 div{ padding: 0.5rem 2rem 0.5rem 2rem;} div{ padding-top: 0.5rem; padding-bottom: 0.5rem; padding-right: 2rem; padding-left: 2rem; }

 <div style="height:100px;background:red;"></div>

you can add padding using above both way.

Answer 3

It's because you are putting commas between the values of different sides.

padding: 0.5rem 2rem 0.5rem 2rem;

will work. Let me know if you have any other issues.