CSS 填充速记与 4 行代码的问题

Question

首先，感谢您来到这里，今天我遇到了一个非常奇怪的 CSS 行为，您可以在代码段中看到：

/* 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;

有人可以解释一下为什么吗？ 顺便说一句，我正在使用此代码设置按钮样式

按钮的完整样式：

 .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

使用速记语法定义元素的padding时，每个值之间不需要逗号。 它应该像这样用空格分隔：

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

您添加了错误的 css。 请检查以下。

 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>

您可以使用以上两种方式添加填充。

Answer 3

这是因为您在不同方面的值之间放置了逗号。

padding: 0.5rem 2rem 0.5rem 2rem;

将工作。 如果您有任何其他问题，请告诉我。