Perché il margine destro negativo non funziona?

Question

Poiché il bordo di un elemento con margin-left: -10px attraversa il bordo del suo genitore, perché non succede lo stesso con 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

Non è perché gli elementi sono disposti da sinistra a destra per default da destra a sinistra. È possibile vedere l'effetto opposto quando si float il <p> s destra.

jsFiddle

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

Answer 2

La buona notizia è che margini negativi fanno lavorare!

Per vedere margini negativi sul lavoro, si consideri il seguente frammento di codice:

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

ho aggiunto outline 's a tutte le div' s e p 's che mostra l'estrazione di una le caselle di contenuto.

Il primo paragrafo ha margini zero e ho spostato un paragrafo a sinistra e l'altro a destra.

Se si dispone di contenuto sufficiente per riempire la larghezza del paragrafo (o se si visualizzano i contorni), si vedrà il riquadro di testo fuoriuscire dalla casella content. Puoi anche vedere dal paragrafo outline che il testo si estende a sinistra ea destra.

Tuttavia, per vedere l'effetto sulla destra, è necessario un contenuto sufficiente per riempire l'intera larghezza del paragrafo o è necessario impostare un colore di sfondo o un contorno sull'elemento figlio.

Se si inizia a fissare la larghezza e l'altezza, su content, verranno visualizzati altri effetti come i paragrafi che non rientrano in content.

Lo studio di questa semplice struttura di codice illustra molti aspetti del modello di box CSS ed è illuminante passare del tempo con esso.

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

Se si rimuove l'imbottitura dal wrapper, non si può notare lo spostamento margine destro perché gli elementi si estenderanno per riempire l'intera larghezza del contenitore padre o la larghezza della pagina a seconda del dettagli specifici di HTML/CSS.

Perché il mio esempio non ha mostrato l'effetto !!! ???

Nel tuo esempio, non hai visto l'effetto, perché si fissa la larghezza delle p elementi specificando width: 100%, che dirige il punto di prendere la larghezza del contenitore genitore (200px nel tuo esempio).

Se si effettua una semplice modifica alla larghezza 100%-auto:

p { 
    background: blue; 
    width: auto; 
} 

vedrete il vostro secondo comma, appena fuori a destra come vi aspettavate.

Nota: Schema vs Border Si noti inoltre che la casella rossa è dovuta al outline, che racchiude le caselle di testo all'interno del content, anche quando le caselle di testo si estendono al di fuori del genitore (content) elemento. Di conseguenza, la casella outline può essere molto più grande della casella border dell'elemento corrispondente.

Answer 3

Semplicemente, basta cambiare il css:

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

a:

p { 
    background: blue; 
    display: block; 
} 

Ecco la demo: http://jsfiddle.net/pVKNz/

Se si desidera fatto come elementi di spostamento, utilizzare questo css:

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

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