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

Avoiding "Double" Borders in CSS

When two adjacent elements with borders are placed side by side, it may appear as if they have a double border at the junction where they meet. To prevent this visual artifact, consider the following CSS techniques:

Using Outline Instead of Borders

For elements that may appear in any order, the outline property provides a reliable solution:

<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>

Negative Margins

Alternatively, using negative margins on the child elements will effectively "erase" the double border:

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

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

Note for Legacy Browsers

The outline property is not supported in older browsers such as IE7 and earlier. In these cases, the negative margin approach is recommended.

The above is the detailed content of How to Prevent Double Borders in CSS: Outline vs. Negative Margins?. For more information, please follow other related articles on the PHP Chinese website!