CSS で二重枠を防ぐ方法: アウトラインと負のマージン?

CSS での「二重」境界線の回避

境界線を持つ 2 つの隣接する要素を並べて配置すると、あたかもそれらが重なっているように見える場合があります。それらが交わる接合部には二重の境界線があります。この視覚的なアーチファクトを防ぐには、次の CSS テクニックを検討してください。

境界線の代わりにアウトラインを使用する

任意の順序で表示される要素に対して、アウトライン プロパティは信頼性の高い解決策:

<code class="css">.collection {
  /* Optional styles if needed */
  margin-top: -1px;
  margin-left: -1px;
}

.collection .child {
  outline: 1px solid;
  margin-top: 1px;
  margin-left: 1px;
}</code>

負のマージン

または、子要素に負のマージンを使用すると、効果的に二重境界線が「消去」されます:

<code class="css">.collection {
  /* Optional styles if needed */
  margin-top: -1px;
  margin-left: -1px;
}

.collection .child {
  margin-top: -1px;
  margin-left: -1px;
}</code>

古いブラウザーに関する注意事項

アウトライン プロパティは、IE7 以前などの古いブラウザーではサポートされていません。このような場合、マイナスマージンアプローチが推奨されます。

以上がCSS で二重枠を防ぐ方法: アウトラインと負のマージン?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。