Avoiding Duplicated Borders in CSS
When adjacent elements with borders are placed next to each other, a visual artifact known as "double borders" can occur at the border intersection. To eliminate this undesirable effect, consider these CSS approaches:
Option 1: Using Outline Property
For situations where the order of elements is unpredictable, using the outline property can effectively prevent double borders:
<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>
Note that outline is not supported in older browsers (IE7 and earlier).
Option 2: Negative Margins with Borders
If using borders is preferred, employ negative margins to offset the double border:
<code class="css">.collection .child { margin-top: -1px; margin-left: -1px; }</code>
The above is the detailed content of How to Avoid Double Borders in CSS: Outline vs. Negative Margins?. For more information, please follow other related articles on the PHP Chinese website!