0

配布用の Web サイトのテーマを作成しています。単体テストをアップロードして、どのように見えるかを確認しました。そのうちの 1 つはネストされたブロッククォートで、私の場合、下部に非常に大きなマージンがありました。スタイリングで解決できました

blockquote blockquote {
margin-bottom:0;
}

...だから私はその問題を解決しましたが、それは別の問題を引き起こしました...誰かが2番目のブロック引用の後に何らかのコンテンツを追加すると、マージンがなくなることに気付きました。私はこれをスタイリングできると確信していますが、誰かがヘッダー、プリ、コードなどを同じ位置に配置した場合はどうなりますか? ...そして、このシナリオは、引用符やコメントだけで現れるだけではありません。

私の質問はこれです:配布用のテーマを構築するとき、テーマ開発者はすべての順列と組み合わせに対してスタイルを設定しますか、それとも可能ですか?

4

1 に答える 1

1

この特定の例では、blockquote にパディングを追加したように聞こえます (おそらく、背景色または境界線もあると見栄えが良くなります)。blockquote にはデフォルトで margin-bottom があるため、padding-bottom と margin-下は一緒に追加されています。

これに対処する私の現在のお気に入りの方法は次のとおりです。

サスの使用:

p, blockquote, .other-margined-elements {
    margin: 1rem 0;

    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }
}

生成された CSS:

p, blockquote, .other-margined-elements {
    margin: 1em 0;
}

p:first-child, blockquote:first-child, .other-margined-elements:first-child {
    margin-top: 0;
}

p:last-child, blockquote:last-child, .other-margined-elements:last-child {
    margin-bottom: 0;
}

この方法では、リストに追加する要素を特定するだけです。私の現在のリストは次のとおりです: h1, h2, h3, h4, h5, h6, p, ul, ol, dl, table, blockquote, div, section, article, aside, fieldset

上記のコードが少しやり過ぎだと思われる場合は、これを行う他の方法があります。

blockquote > :first-child {
    margin-top: 0;
}

blockquote > :last-child {
    margin-bottom: 0;
}

:first-childおよび疑似クラスのおかげで、:last-childすべての組み合わせを書き出す必要はありません。

于 2012-12-17T16:57:42.060 に答える