0

内容に関係なく、四方に一定の間隔でボックスを作成したいと思います。

残念ながら、要素には余白があり、ボックスにパディングが適用されると問題が発生します。これは、要素のマージンがパディングを超えてボックスから「流れ出ない」ために予想されます。デモはhttp://jsfiddle.net/cZf7E/1/にあります

これまで、ボックスの上部（with margin-top: 0）と下部（with margin-bottom: 0）にあるものすべてに特別なスタイルルールがありました。上部は悪くありませんが、下部にはスタイルを設定するための潜在的なタグがたくさんあります。

それほどハッキーではないこれを行う方法はありますか？

4

1 に答える 1

1

どうですか

aside :first-child {
    margin-top: 0;
}
​aside :last-child {
    margin-bottom: 0;
}​

最初/最後の要素は任意の種類の要素にすることができます（h1、、h2... p、、、）divspan

デモ

asideとfirst-child/の間にスペースがあることに注意してくださいlast-child。それがないと、スタイリングは最初/最後に適用されますaside。

より多くのレベルがあり、asideさらに下への伝播が望ましくない場合は、を使用することをお勧めします

aside > :first-child {
    margin-top: 0;
}
​aside > :last-child {
    margin-bottom: 0;
}​

の直接の子だけを選択するためaside。

伝播と伝播なしのデモ（もちろんmargin、、、、などのインライン要素には適用されません。これはspan、伝播がどのように機能するかを示すためだけのものです）em。strong

サポート：Ben Dyerが指摘しているように、これlast-childはCSS3疑似クラスです。IE8以前ではサポートされていません。また、first-childIE8と7ではバグがあります。

于 2012-07-25T14:29:16.367 に答える