Warum der negative rechte Rand nicht funktioniert?

Question

Da die Kante eines Elements mit margin-left: -10px die Kante des übergeordneten Elements kreuzt, warum passiert das nicht auch mit margin-right: -10px?

example

div { 
 
    background: red; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 

 
p { 
 
    background: blue; 
 
    width: 100%; 
 
} 
 

 
.left { 
 
    margin-left: -10px; 
 
} 
 

 
.right { 
 
    margin-right: -10px; 
 
}

<div> 
 
    <p class="left">Hello</p> 
 
</div> 
 
<div> 
 
    <p class="right">Hello</p> 
 
</div>

Answer 1

Es ist, weil Elemente von links nach rechts nicht standardmäßig von rechts nach links gelegt werden. Sie können den gegenteiligen Effekt sehen, wenn Sie float die <p> s richtig sind.

jsFiddle

.right { 
    margin-right: -10px; 
    float:right; 
} 

Answer 2

Die gute Nachricht ist, dass negativen Margen tun arbeiten!

.wrapper { 
 
    outline: 1px solid blue; 
 
    padding: 40px; 
 
} 
 

 
.content { 
 
    outline: 1px solid red; 
 
    background-color: #D8D8D8; 
 
} 
 

 
.content p { 
 
    outline: 1px dotted blue; 
 
    background-color: rgba(255, 255, 0, 0.3); 
 
    margin: 0 0 0 0; 
 
    text-align: justify; 
 
} 
 

 
.content p.lefty { 
 
    margin-left: -20px; 
 
} 
 

 
.content p.righty { 
 
    margin-right: -20px; 
 
}

<div class="wrapper"> 
 
    <div class="content"> 
 
    <p>Lorem ipsum dolor sit amet, ...</p> 
 
    <p class="lefty">Sed ipsum ante, dictum vel rhoncus id, ...</p> 
 
    <p class="righty">Curabitur aliquam tristique mattis...</p> 
 
    </div> 
 
</div>

Ich habe outline 's zu all div' s und p sind das Ausmaß der zeigen:

Um negative Margen bei der Arbeit, betrachten Sie den folgenden Code-Schnipsel zu sehen die Inhaltsfelder.

Der erste Absatz hat keine Ränder und ich habe einen Absatz nach links und den anderen nach rechts versetzt.

Wenn Sie genügend Inhalt haben, um die Breite des Absatzes zu füllen (oder wenn Sie die Umrisse anzeigen), wird das Textfeld außerhalb des Felds content angezeigt. Sie können auch aus dem Absatz outline sehen, dass der Text sich nach links und nach rechts erstreckt.

Um den Effekt auf der rechten Seite zu sehen, benötigen Sie jedoch genügend Inhalt, um die gesamte Breite des Absatzes auszufüllen, oder Sie müssen eine Hintergrundfarbe oder Kontur auf dem Kindelement festlegen.

Wenn Sie beginnen, die Breite und Höhe zu fixieren, sehen Sie unter content andere Effekte wie die Absätze, die außerhalb von content fließen.

Das Studium dieser einfachen Code-Struktur veranschaulicht viele Facetten des CSS-Box-Modells und es ist aufschlussreich, etwas Zeit damit zu verbringen.

Fiddle Referenz: http://jsfiddle.net/audetwebdesign/2SKjM/

Wenn Sie das Polster aus dem wrapper entfernen, können Sie nicht den rechten Rand Verschiebung feststellen, da die Elemente über die gesamte Breite des übergeordneten Container oder die Seitenbreite auf die Abhängigkeit zu füllen verlängern spezifische Details des HTML/CSS.

Warum zeigte mein Beispiel nicht den Effekt !!! ???

In Ihrem Beispiel Sie nicht sehen, die Wirkung, weil Sie die Breite der p Elemente festgelegt durch die Angabe width: 100%, die den Absatz lenkt die Breite der geordneten Container (200px in Ihrem Beispiel) zu übernehmen.

Wenn Sie machen eine einfache Änderung der Breite 100%-auto:

p { 
    background: blue; 
    width: auto; 
} 

Sie Ihre zweite Absatz gerade aus auf der rechten Seite sehen, wie Sie erwartet.

Hinweis: Outline vs Border Beachten Sie auch, dass die rote Box auf die outline zurückzuführen ist, die die Textfelder innerhalb der content umschließt, auch wenn die Textfelder außerhalb des Mutter erstrecken (content) Elements. Als Ergebnis kann die outline Box viel größer sein als die border Box des entsprechenden Elements.

Answer 3

einfach, gerade diese CSS ändern:

p { 
    background: blue; 
    width: 100%; 
} 

zu:

p { 
    background: blue; 
    display: block; 
} 

Hier ist die Demo: http://jsfiddle.net/pVKNz/

Wenn Sie Elemente wie Verschieben, gemacht wollen diese CSS verwenden:

.left { 
    margin-left: -10px; 
    margin-right:10px; 
} 

.right { 
    margin-right: -10px; 
    margin-left:10px; 
}