[英]CSS problem with padding shorthand vs 4 line code
first of all, thx for coming here, Today I encountered a very strange CSS behaviour as you can see in the snippet:首先,感谢您来到这里,今天我遇到了一个非常奇怪的 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;
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); }
When using shorthand syntax to define the padding
for an element, you don't need commas between each value.使用速记语法定义元素的
padding
时,每个值之间不需要逗号。 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); }
You are adding wrong css.您添加了错误的 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.您可以使用以上两种方式添加填充。
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.
如果您有任何其他问题,请告诉我。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.