Question

我在网页上有一个段落，在所有4个边上都有20个像素的边距。我想用一个属性改变顶部和底部填充（因此padding-top:0;padding-bottom:0;不会这样做。）

我在这里展示了我所尝试的内容。

在这个小提琴中，我尝试使用padding: 30px inherit;来改变段落的顶部和底部填充。但是，除了更改顶部和底部填充之外，此属性值对还将左右填充设置为0。

p {
 border: 1px solid #000;
 padding: 20px;    
}

/* 
 * Here's my failed attempt at only altering the top 
 * and bottom padding values. The left and right padding
 * values are changing even if I use inherit.
 */

p {
 padding: 30px inherit;   
}

我是否可以仅使用一个属性更改顶部和底部填充？

Answer 1

不，你不能。 inherit表示该元素从其父级继承填充。也就是说，正文（或p所在的任何元素），而不是样式表中的“原始”p。要保持左右填充完整，您可以使用所描述的两个属性。

Answer 2

简而言之，没有。

填充的唯一允许属性是宽度（固定）或百分比，或继承（来自父元素）。无法继承已设置的值。

要设置单个填充值，必须使用各个属性。

请参阅http://www.w3.org/TR/CSS2/box.html#padding-properties

Answer 3

如果您只想更改顶部和底部，只需使用速记填充：30px 0px 30px;将是顶部，右侧，底部。

Answer 4

Inherit基本上只继承父元素的样式，但在你的情况下你不能使用inherit，但你可以使用class为两个“p”元素执行以下操作。

p{
    border: 1px solid #000;
    padding: 20px;    
}

p.another{
    padding: 30px 20px;  
}
<p>A Paragraph with 20px top, right, bottom, left</p>
<p class="another">Another Paragraph with 30px top, 20px right, 30px bottom, 20px left</p>

Answer 5

直到现在您还不能。但是，即使这是一个非常老的问题，我也想以一个新的答案对其进行更新。

借助CSS Logical Properties and Values draft，以后您将可以这样做。

它使您可以指定块或行内填充的开始和结束，而该块或行内填充取决于书写方式和方向，而不是根据前面的屏幕从左到右进行简单的操作。

如果要在元素的顶部和底部指定10px的填充，则可以使用以下示例来实现：

.element {
    padding-block: 10px;
}

尽管尚无任何浏览器支持，但您可以通过将PostCss Preset-Env plugin与PostCSS一起在项目中使用它。

我可以仅使用一个属性更改顶部和底部填充吗？

5 个答案: