css 我可以用一个属性只改变顶部和底部的填充吗?

hmtdttj4  于 12个月前  发布在  其他
关注(0)|答案(5)|浏览(143)

我在网页上有一个段落,4个边都有20个像素的边距。我想用一个属性只改变顶部和底部的填充(所以padding-top:0;padding-bottom:0;不行)。
我所做的尝试在这里得到了证明。
http://jsfiddle.net/nFCru/1/
在这个Fiddle中,我尝试使用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;   
}​

字符集
我可以用一个属性只改变顶部和底部的填充吗?

91zkwejq

91zkwejq1#

不可以。inherit意味着元素继承了其父元素的padding。也就是说,body(或者p所在的任何元素),而不是样式表中的“原始”p。要保持左右padding不变,你所能做的就是像你描述的那样使用这两个属性。

btqmn9zl

btqmn9zl2#

简而言之,没有。
唯一允许的填充属性是宽度(固定)或百分比,或继承(从父元素)。没有办法继承已经设置的值。
要设置各个填充值,必须使用各个属性。
请访问http://www.w3.org/TR/CSS2/box.html#padding-properties

gjmwrych

gjmwrych3#

直到现在,你还不能回答。但即使这是一个很老的问题,我想我会用一个新的答案来更新它。
自2021年以来,所有主流浏览器都支持CSS逻辑属性和值规范,现在您可以做到这一点。它允许您指定块的开始和结束或内联填充,这取决于书写模式和方向,而不是简单的基于屏幕从左到右。
如果你想在元素的顶部和底部指定一个10px的填充,你可以用下面的例子来实现:

.element {
    padding-block: 10px;
}

字符集

dzhpxtsq

dzhpxtsq4#

如果你只想改变顶部和底部,只需使用简写padding:30 px 0 px 30 px;将是顶部,右侧,底部。

4urapxun

4urapxun5#

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>

字符集

相关问题