記事の内容に適した質問ベースのタイトルをいくつか紹介します。 * CSS の二重枠線: 望ましくない効果を回避するには? * CSS レイアウトの問題: 隣接する Div 間の二重境界線の処理 *

CSS での二重境界線の回避

境界線を持つ隣接する div を並べて配置すると、交差部分に望ましくない二重境界線効果が発生する可能性があります。これは、Chrome ウェブストアのホームページのようなレイアウトでは特に当惑する可能性があります。

この問題に対処するには、次の CSS トリックを検討してください。

アウトライン トリック

子要素 (div) に境界線の代わりにアウトラインを追加し、それに応じてマージンを調整すると、目的の効果を得ることができます。

.collection {
    /* optional styles */
    margin-top: -1px;
    margin-left: -1px;
}

.collection .child {
    outline: 1px solid;
    margin-top: 1px;
    margin-left: 1px;
}

アウトラインは、IE8 より古いブラウザではサポートされていないことに注意してください。

境界線と負のマージンのトリック

もう 1 つのオプションは、子要素に境界線を使用し、境界線の幅を抑えるために負のマージンを適用することです。

.collection .child {
    margin-top: -1px;
    margin-left: -1px;
}

これらの方法のいずれも効果的に二重を防止します。境界線をオーバーラップまたはオフセットして境界線の外観を調整します。どの手法を選択するかは、ブラウザのサポートと特定のプロジェクトの要件によって異なる場合があります。

以上が記事の内容に適した質問ベースのタイトルをいくつか紹介します。 * CSS の二重枠線: 望ましくない効果を回避するには? * CSS レイアウトの問題: 隣接する Div 間の二重境界線の処理 *の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。