Wie verhindere ich doppelte Ränder in CSS, wenn benachbarte Divs verwendet werden?

Verhindern doppelter Ränder in CSS

Bei zwei benachbarten Divs mit Rändern kann es so aussehen, als gäbe es dort, wo sie sich treffen, einen doppelten Rahmen. Um dieses Problem zu lösen, berücksichtigen Sie Folgendes:

Verwenden einer Gliederung anstelle eines Rahmens

• Ersetzen Sie den Rahmen durch eine Gliederung für jedes Div:

<code class="css">.collection .child {
    outline: 1px solid;
}</code>

• Fügen Sie positive Ränder hinzu, um die durch die Kontur erzeugte zusätzliche Breite auszugleichen:

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

Negative Ränder mit Rändern verwenden

Alternativ können Sie die Ränder beibehalten und negative Ränder verwenden, um die Überlappung zu reduzieren:

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

Beachten Sie, dass diese Option möglicherweise nicht für alle Szenarien geeignet ist, insbesondere wenn die Divs variable Höhen oder Breiten haben .

Das obige ist der detaillierte Inhalt vonWie verhindere ich doppelte Ränder in CSS, wenn benachbarte Divs verwendet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!