4

特定のクラスについて、次のスタイルが必要です。

stlye1 {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0px;
}

しかし、それは多くの重複があるため、次のように書きたいと思います。

stlye1 {
    padding: 0;
    padding-bottom: 10px;
}

これは何か悪いことになりますか？

アップデート：

3 つの値 (省略形) が表示されると、最後の値が何に適用されるのかわかりません。そのため、どちらをオーバーライドしたいかを明確にするために、上記の2番目の方法を思いつきました。

更新 2:

簡単な方法として、次のことをどのように具体化しますか。

stlye1 {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 10px;
    padding-left: 0px;
}

style1 {
    padding: 0 0 10px; // now i know this one, thanks!
}



stlye2 {
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 0px;
}

style2 {
    padding: 0 10px 0; // is this correct?
}



stlye3 {
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0px;
}

style3 {
    padding: 10px 0 0; // is this correct?
}



stlye4 {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 10px;
}

style4 {
    padding: // i have no clue.
}

更新 3:

要するに、style2 と 4 は、3 つの値のみを指定することによって省略形で実行することはできません。PassKitで示されているように、値が3つしかなく、leftとrightを単独で指定することはできません。

4

2 に答える 2

5

省略形を使わないのはなぜですか。

stlye1 {
    padding: 0 0 10px; /* top (right/left) bottom */
}

それはどこにあります：

padding: top right bottom left;
于 2013-01-07T19:01:47.150 に答える
3

あなたの提案は完全に有効ですが、最も簡潔な形式は次のようになります。

stlye1 {
    padding: 0 0 10px;
}

左の値が指定されていないため、この省略形は次のように分解されpadding: top(0) right(0) bottom(10px);、左のデフォルトは右の値になります。

質問の 4 つのスタイルについては、スタイル 1 と 3 が正しいですが、スタイル 2 と 4 については、以下のスタイル 5 とそれに付随するメモを参照してください。

参考までに、スタイルの省略形は次のように分類されます。

値が 1 つの場合は、上、右、下、左の 4 つの属性すべてに適用されます。

stlye1value {
    padding: 10px;
}

/* equals */

stlye1value {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

2 つの値がある場合、最初の値は上下の属性に適用され、2 番目の値は左右の属性に適用されます。

stlye2values {
    padding: 0 10px;
}

/* equals */

stlye2values {
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 0;
    padding-left: 10px;
}

値が 3 つある場合、最初の値が上に適用され、2 番目が左右に適用され、3 番目が下に適用されます。

stlye3values {
    padding: 0 10px 20px;
}

/* equals */

stlye3values {
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
}

4 つの値すべてを指定すると、上、右、下、左の順にパディングが設定されます (上から時計回りの円を考えてください)。

stlye4values {
    padding: 0 10px 20px 30px;
}

/* equals */

stlye4values {
    padding-top: 0;
    padding-right: 10px; 
    padding-bottom: 20px;
    padding-left: 30px;

}

注:padding-left 4 つの値すべてを入力するか、またはを使用せずに、省略形を使用して右または左の値を個別に指定する方法はありませんpadding-right。

style5 {
    padding-left: 10px; 
}

/* providing there are no previous padding rule for style5 equals */

style5 {
    padding: 0 0 0 10px; 
}

/* equals */

stlye5 {
    padding:0;
    padding-left:10px;
}

/* equals */

stlye5 {
    padding-top: 0;
    padding-right: 0; 
    padding-bottom: 0;
    padding-left: 10px;

}
于 2013-01-07T19:01:44.217 に答える