CSS - Marge négative pour enlever le rembourrage du parent

Question

Est-ce une bonne pratique d'utiliser des marges négatives pour enlever le rembourrage de l'élément enveloppant?

Par exemple, lequel des éléments de code suivants est préférable d'utiliser?

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

ou

<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

Eh bien, il y a la limite d'être un hack. Tant qu'il est utilisé avec modération, je dirais que c'est ok. La clé est de s'assurer qu'il est facile à lire et à comprendre. Ajoutez des commentaires si nécessaire.

Answer 2

Pourquoi ne pas simplement déclarer padding:5px 0; afin de ne pas avoir de rembourrage horizontal? Bien que je dirais que c'est parfaitement bien d'utiliser des marges négatives, c'est ce pourquoi ils sont faits, mais si vous pouvez les éviter en premier lieu, faites-le.

Answer 3

La seconde est de loin supérieure. Les marges négatives doivent être évitées car elles vous causeront des problèmes dans IE.

Answer 4

marge négative sa cacher le div .... Voici astuce utilisation zoom: 1, position: relative

est ici Exemple

Problème:

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

dans IE zone rouge de la barre d'outils div se cacher. Même si nous utilisons zoom: 1. Pour se débarrasser de ce problème, nous devons ajouter une position: relative aussi.

Solution:

afin que votre classe css deviendra

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