Comment fonctionnent les marges négatives dans CSS et pourquoi (margin-top: -5! = Margin-bottom: 5)?

Une astuce courante pour les éléments de positionnement vertical consiste à utiliser les CSS suivantes:

.item { position:absolute; top:50%; margin-top:-8px; /* half of height */ height: 16px; } 

Vu dans la vue de mesure comme dans Chrome, voici ce que vous voyez:

entrer la description de l'image ici

Cependant, il n’y a pas de marge visuelle lorsque vous survolez l’élément, c.-à-d. Que la marge est «en dehors» de la bordure et peut être visualisée. Mais les marges négatives n’apparaissent pas. Comment regardent-ils et qu’est-ce qui le rend différent?

Pourquoi margin-top:-8px n’est pas la même chose que margin-bottom:8px ?

Alors, comment fonctionnent les marges négatives et quelle est l’intuition derrière elles? Comment font-ils pour “augmenter” (en cas de margin-top < 0 ) un article?

Les marges négatives sont valables en CSS et la compréhension de leur comportement (conforme) repose principalement sur le modèle de boîte et la réduction des marges. Bien que certains scénarios soient plus complexes, de nombreuses erreurs peuvent être évitées après avoir étudié les spécifications.

Par exemple, le rendu de votre exemple de code est guidé par la spécification css décrite dans le calcul des hauteurs et des marges pour les éléments non remplacés positionnés de manière absolue .

Si je devais faire une représentation graphique, j’irais probablement avec quelque chose comme ça (pas à l’échelle):

marge supérieure négative

La zone de marge a perdu 8px sur le dessus, mais cela n’affecte pas le contenu et les cases de remplissage . Comme votre élément est absolument positionné, déplacer l’élément 8px vers le haut ne provoque aucune perturbation supplémentaire dans la mise en page; avec un contenu statique in-flow, ce n’est pas toujours le cas.

Prime:

Encore faut-il convaincre que lire des spécifications est la voie à suivre (par opposition aux articles comme celui-ci )? Je vois que vous essayez de centrer l’élément verticalement, alors pourquoi devez-vous définir margin-top:-8px; et non margin-top:-50%; ?

Eh bien, le centrage vertical en CSS est plus difficile qu’il ne devrait l’être . Lorsque vous définissez des marges supérieures ou inférieures égales en%, la valeur est calculée en pourcentage, toujours par rapport à la largeur du bloc contenant . C’est plutôt un piège courant et la bizarrerie est rarement décrite en dehors de W3 docos

Je vais essayer de l’expliquer visuellement:

 /** * explaining margins */ body { padding: 3em 15% } .parent { width: 50%; width: 400px; height: 400px; position: relative; background: lemonchiffon; } .parent:before, .parent:after { position: absolute; content: ""; } .parent:before { top: 0; bottom: 0; left: 50%; border-left: dashed 1px #ccc; } .parent:after { left: 0; right: 0; top: 50%; border-top: dashed 1px #ccc; } .child { width: 200px; height: 200px; background: rgba(200, 198, 133, .5); } ul { padding: 5% 20px; } .set1 .child { margin: 0; position: relative; } .set2 .child { margin-left: 75px; position: relative; } .set3 .child { margin-left: -75px; position: relative; } /* position absolute */ .set4 .child { top: 50%; left: 50%; margin: 0; position: absolute; } .set5 .child { top: 50%; left: 50%; margin-left: 75px; position: absolute; } .set6 .child { top: 50%; /* level from which margin-top starts - downwards, in the case of a positive margin - upwards, in the case of a negative margin */ left: 50%; /* level from which margin-left starts - towards right, in the case of a positive margin - towards left, in the case of a negative margin */ margin: -75px; position: absolute; } 
  

position: relative;

Set 1

 .set1 .child { margin: 0; position: relative; } 

Set 2

 .set2 .child { margin-left: 75px; position: relative; } 

Set 3

 .set3 .child { margin-left: -75px; position: relative; } 

position: absolute;

Set 4

 .set4 .child { top: 50%; left: 50%; margin: 0; position: absolute; } 

Set 5

 .set5 .child { top: 50%; left: 50%; margin-left: 75px; position: absolute; } 

Set 6

 .set6 .child { top: 50%; left: 50%; margin: -75px; position: absolute; } 

La marge est l’espacement à l’extérieur de votre élément, tout comme le remplissage est l’espacement à l’intérieur de votre élément.

La définition de la marge inférieure indique la distance que vous souhaitez obtenir sous le bloc actuel. Définir une marge supérieure négative indique que vous souhaitez un espacement négatif au-dessus de votre bloc. L’espacement négatif peut être en soi un concept déroutant, mais la marge supérieure positive pousse le contenu vers le haut, tout comme la marge supérieure positive.

Une marge supérieure de -8px signifie qu’il sera 8px plus élevé que s’il avait 0 marge.

Une marge inférieure de 8px signifie que la chose en dessous sera 8px plus bas si elle avait 0 marge.

Les bons points déjà faits ici, mais s’il y a beaucoup d’informations sur la façon dont le rendu des marges est accompli par le navigateur, la raison n’est pas encore tout à fait:

“Pourquoi margin-top: -8px n’est pas la même chose que margin-bottom: 8px?”

ce que nous pourrions également demander, c’est:

Pourquoi une marge inférieure positive ne «saute-t-elle pas» les éléments précédents, alors qu’une marge supérieure positive «se heurte» aux éléments suivants?

Donc, ce que nous voyons, c’est qu’il y a une différence dans le rendu des marges en fonction du côté où elles sont appliquées – les marges supérieure (et gauche) sont différentes des marges inférieures (et droites).

les choses deviennent plus claires avec un regard (simplifié) sur la façon dont les styles sont appliqués par le navigateur: les éléments sont affichés de haut en bas dans la fenêtre, en commençant par le coin supérieur gauche (restons-en au l’horizontale est traitée de la même façon).

considérez le code HTML suivant:

 

analogues à leur position dans le code, ces trois cases apparaissent empilées de haut en bas dans le navigateur (en gardant les choses simples, nous ne considérerons pas ici la propriété order du module css3 ‘flex-box’ ). ainsi, chaque fois que des styles sont appliqués à la case 3, les positions de l’élément précédent (pour les cases 1 et 2) ont déjà été déterminées et ne devraient plus être modifiées pour des raisons de rapidité de rendu.

Maintenant, imaginez une marge supérieure de -10px pour la case 3. Au lieu de déplacer tous les éléments précédents pour rassembler un peu d’espace, le navigateur va simplement pousser la boîte 3 vers le haut (ou en dessous, selon l’index z). ) tout élément précédent. Même si la performance ne posait pas de problème, déplacer tous les éléments pourrait signifier les déplacer hors de la fenêtre, de sorte que la position de défilement actuelle devrait être modifiée pour que tout soit à nouveau visible.

Il en va de même pour une marge inférieure pour la case 3, à la fois négative et positive: au lieu d’influencer des éléments déjà évalués, seul un nouveau «sharepoint départ» pour les éléments à venir est déterminé. définir ainsi une marge inférieure positive repoussera les éléments suivants ; un négatif les poussera vers le haut.

Comme vous avez utilisé un positionnement absolu et indiqué un pourcentage supérieur, seule margin-top affectera l’emplacement de votre object .item. Si au lieu de cela vous le positionniez en utilisant le fond: 50%, alors vous auriez besoin de la marge inférieure -8px pour la centrer et la marge supérieure n’aurait aucun effet.

La marge affecte les limites d’un élément en termes de positionnement, soit absolument comme dans votre cas, soit par rapport aux éléments voisins. Imaginez que cette marge constitue la base de votre élément sur lequel elle se trouve. Ils ont généralement la même taille, mais peuvent être agrandis ou réduits sur n’importe lequel des quatre bords.

Votre CSS indique au navigateur de placer le haut de votre élément dans la marge située à 50% de la page. Cependant, comme tous les éléments ne sont pas un pixel, le navigateur doit savoir quelle partie s’aligner à 50% de la page. Pour aligner le haut de l’élément, il utilise la marge supérieure. Par défaut, cela correspond au haut de l’élément, mais vous pouvez le modifier avec CSS.

Dans votre cas, les 50% supérieurs entraîneraient le début de l’élément au milieu de la page. En appliquant une marge supérieure négative, le navigateur utilise le point 8px dans l’élément du haut (c.-à-d. La ligne au milieu de celui-ci) pour le placer à 50%.

Si vous appliquez une marge positive en bas, cela étend la ligne que le navigateur utilise pour positionner le fond en dehors de l’élément lui-même, en créant un espace entre celui-ci et tout élément adjacent ci-dessous. le fond.

Je me demande si on a bien répondu à cette question: comment fonctionnent les marges CSS et pourquoi est-ce que la marge supérieure: -5; n’est pas la même chose que margin-bottom: 5 ;?

La marge est la distance par rapport à l’environnement de l’élément. margin-top indique “… distance par rapport à l’environnement lorsque nous mesurons à partir du” côté “supérieur de la” boîte “de l’élément et que la marge inférieure est la distance du” côté “inférieur de la” boîte “”. Puis marge-top: 5; est concerné par le périmètre supérieur “latéral”, -5 dans ce cas; tout ce qui se rapproche du «côté» supérieur peut recouvrir le «côté» supérieur de l’élément de 5, et le bord inférieur: 5; signifie que la distance entre l’élément «côté» de côté et l’entourage est de 5.

Fondamentalement, mais affecté par des éléments flottants et autres: http://www.w3.org/TR/CSS2/box.html#margin-properties .

http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

Je suis prêt à être corrigé.