CSS で二重枠を回避する方法: アウトラインと負のマージン?-CSSチュートリアル-php.cn

CSS で二重枠を回避する方法: アウトラインと負のマージン?

Patricia Arquette

リリース： 2024-11-03 05:46:03

オリジナル

880 人が閲覧しました

How to Avoid Double Borders in CSS: Outline vs. Negative Margins?

CSS で枠線の重複を避ける

枠線を持つ隣接する要素が隣り合って配置されると、「二重枠線」として知られる視覚的なアーティファクトが発生します。国境交差点で発生する可能性があります。この望ましくない影響を排除するには、次の CSS アプローチを検討してください。

オプション 1: アウトラインプロパティを使用する

要素の順序が予測できない状況では、アウトラインプロパティを使用すると、二重枠線を効果的に防止します:

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

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

ログイン後にコピー

アウトラインは古いブラウザ (IE7 以前) ではサポートされていないことに注意してください。

オプション 2: 枠線付きの負のマージン

境界線を使用する場合は、負のマージンを使用して二重境界線をオフセットします:

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

ログイン後にコピー

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