Pourquoi utiliser des marges négatives?

Question

Il suffit de regarder un peu de CSS ici, et je remarqué:

.head{position:relative;overflow:hidden;margin:-30px 0 0 -25px;width:820px;padding:20px 25px 0 25px;background:url(/images/bkg.gif) 0 0 no-repeat;} 

Pourquoi voudriez-vous mettre -30 et les marges -25px?

Answer 1

J'ai commencé à taper une réponse, puis en ai trouvé une bien meilleure here (Wayback Machine backup). Quelques points saillants:

marges négatives:

• sont CSS valide
• ne cassent pas la page flux
• ont des niveaux élevés de compatibilité inter-navigateur (bien que si elles rompent votre lien ou image flottante, puis essayez d'ajouter la position: relative, cela devrait le fixer)

Leur effet sur l'élémé non gonflé nts:

• les appliquant au-dessus ou à gauche d'un élément « tire » cet élément dans le sens approprié (s)
• toutefois les appliquer sur le fond ou à droite d'un élément « tire » immédiatement les éléments suivants en eux, les faisant se chevaucher

leur effet sur les éléments flottants:

• c'est plus complexe et je ne peux pas le résumer mieux que l'article. Avoir un jeu dans Firebug pour avoir une idée pour eux.

Il y a quelques brillants exemples d'utilisation de la marge négative dans cet article (en particulier la mise en page 3 colonnes • Magic. Je l'ai utilisé a similar technique pour la mise en page avant.) Je l'ai trouvé L'utilisation la plus courante pour eux est juste pour déplacer un élément d'une petite quantité pour corriger sa position, et pour faire chevaucher un élément pour un autre effet visuel.

Answer 2

Les marges négatives peuvent être utiles lorsque vous avez un autre élément "autour" que vous voulez par exemple. avoir un rembourrage pour tous les autres éléments. Je l'utilise très souvent, lire ici, pourquoi: http://www.simplebits.com/notebook/2005/05/23/negative.html

Answer 3

Beaucoup de trucs et de bons effets utilisent des marges négatives:

image Trick de remplacement - lorsque vous voulez utiliser cette police particulière et vous ne pouvez pas déchirer loin de lui, le remplacement de l'image est le truc. Utilise des marges négatives pour repousser la police normale et la remplacer par la police "image". Renversements avec bordures - en donnant une marge négative à l'image de la même taille en pixels que la taille de la bordure, l'image, et donc la mise en page, ne peuvent pas être déplacées lors d'un retournement.

Positionnement de l'écran central - en utilisant des marges négatives de la même dimension que la hauteur et la largeur de l'objet que vous souhaitez centrer, vous pouvez centrer un objet au milieu du navigateur.

Answer 4

En fait, je pense qu'il ya un cas d'utilisation où les marges négatives sont la seule chose à faire:

Vous voulez une partie d'une boîte à étendre sur l'ensemble des parents, même sur le rembourrage. Ainsi, au lieu de supprimer le remplissage de l'élément parent et de l'appliquer à tous les enfants sauf pour votre cas particulier, vous donnez à votre cas particulier une marge négative. Aussi pas de marchandage avec le positionnement. Fonctionne très bien et est très lisible.

Exemple: http://codepen.io/anon/pen/DpHvu