Question

我经常会遇到需要更改元素的padding-left和padding-right（或border-left和border-top等）的情况，但请保留{{ 1}}和padding-top，否则就会如此。

2个选项：

padding-bottom
{padding-left: D; padding-right: C;}

在选项2中，我必须使用Inspect Element来获取{padding: A B C D;}和A的当前值。选项1的缺点是冗长。

那么，是否有第三种选择我可以写C，除了使用一些CSS词，意思是“如果我没有为{padding: A B C D;}指定它将会是什么”和{{1 }}？

Answer 1

填充是CSS中的一个特殊属性，因为它具有不同的签名＆＃39;。据我所知，您无法执行 padding: initial initial 1em 1em之类的操作，但您可以使用这些速记属性：

来自developer.mozilla.com

/* Apply to all four sides */
padding: 1em;

/* vertical | horizontal */
padding: 5% 10%;

/* top | horizontal | bottom */
padding: 1em 2em 2em; 

/* top | right | bottom | left */
padding: 2px 1em 0 1em;

不幸的是，如果您只想padding-bottom和padding-left或类似的组合，您似乎必须单独拼出它们。

Answer 2

在填充方面，您可以执行以下操作：

.classname {padding: 10px inherit;}

这将为顶部和底部设置10px，它将继承其父元素的填充。

另一种选择是：

.classname {padding: 10px initial;}

Initial将使用为该元素设置的默认值。

根据元素的类型，有时您使用auto代替initial。

Answer 3

默认情况下，所有四个填充属性都设置为0.

您可以使用简写表示法设置填充，例如：

.yourclass{
    padding: 0 10px 0 10px;
}

速记版本中元素的顺序为：顶部，右侧，底部，左侧。

Answer 4

使用另一个类来覆盖第一个类。

.first {
    padding: 5px;
}

.second {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

<div class="first second">no left/right padding</div>

有没有办法只组合两个填充属性方向？

4 个答案: