1つのプロパティで上部と下部のパディングのみを変更できますか？

Question

私はすべての4つの側面に20のピクセルマージンを持つウェブページ上のパラグラフを持っています。私は、単一のプロパティで上と下のパディングを変更したい（padding-top:0;padding-bottom:0;はしません）。

ここで私が試したことが実証されています。このフィドルで

http://jsfiddle.net/nFCru/1/

、私は段落のちょうど上部と下部パディングを変更する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; 
}​ 

1つのプロパティでトップとボトムのパディングのみを変更できますか？

Answer 1

いいえ、できません。 inheritは、要素がそのパディングをその親から継承することを意味します。つまり、スタイルシートの "元の" pではなく、ボディ（またはpがどんな要素に入っていても）です。左と右のパディングをそのままにするには、説明したように2つのプロパティを使用するだけです。

Answer 2

要するに、

パディングの許容できる属性は、幅（固定）またはパーセンテージ、または親要素からの継承のみです。すでに設定されている値を継承する方法はありません。

個々のパディング値を設定するには、個々のプロパティを使用する必要があります。

はあなたが唯一の上部と下部を変更したい場合はhttp://www.w3.org/TR/CSS2/box.html#padding-properties

Answer 3

は、単に速記のパディングを使用してください：30px 30px 0PX。上、右、下になります。

Answer 4

継承は基本的に親要素のスタイルのみを継承しますが、継承を使用することはできませんが、クラスを使用して2つの "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>