CSS - Negativer Rand zum Entfernen von Parent's Padding

Question

Ist es eine gute Übung, negative Ränder zu verwenden, um das Padding des Wrapper-Elements zu entfernen?

Zum Beispiel, welche der folgenden Codestücke ist besser zu verwenden?

<div style="padding: 5px;"> 
Shortened width string 
<div style="margin: 0 -5px;">Full width string</div> 
Shortened width string 
</div> 

oder

<div> 
<div style="padding: 5px;">Shortened width string</div> 
<div>Full width string</div> 
<div style="padding: 5px;">Shortened width string</div> 
</div> 

Answer 1

Nun grenzt es ein Hack auf zu sein. Solange es mit Zurückhaltung verwendet wird, würde ich sagen, es ist in Ordnung. Der Schlüssel ist, sicherzustellen, dass es leicht zu lesen und zu verstehen ist. Fügen Sie Kommentare hinzu, wenn Sie müssen.

Answer 2

Warum nicht einfach padding:5px 0; deklarieren, so dass Sie keine horizontale Auffüllung haben? Obwohl ich argumentiere, dass es vollkommen in Ordnung ist, negative Ränder zu verwenden, dafür sind sie gemacht, aber wenn Sie sie überhaupt vermeiden können, tun Sie das auch.

Answer 3

Die zweite ist weit überlegen. Negative Ränder sollten vermieden werden, weil sie Ihnen Probleme in IE verursachen werden.

Answer 4

negativer Rand sein verstecken das Div .... Hier ist Trick Verwendung Zoom: 1, position: relative

Hier ist Beispiel

Problem:

.container{ 
padding: 20px; 
} 
.toolbar{ 
margin-top: -10px ; 
} 

in IE roten Bereich der Symbolleiste div verstecken sich. sogar wir verwenden Zoom: 1. Um dieses Problem loszuwerden, müssen wir Position: relativ hinzufügen.

Lösung:

so Ihre CSS-Klasse

.container{ 
padding: 20px; 
} 
.toolbar{ 
margin-top: -10px ; 
zoom: 1; 
position: relative; 
}