Quel est le processus de calcul du pourcentage de marge maximale ?

Question

Je sais que cela devrait être simple, mais quelqu'un peut-il me dire pourquoi les éléments enfants du code suivant s'étendent au-delà des limites du conteneur parent lorsque margin-top: 50% est appliqué ? Comment est calculé le pourcentage de marge supérieure ?

.container {  
  background: lightblue; 
  padding: 10px; 
  height: 200px;
}

p { 
  display: block; 
  border:1px solid red;
  margin-top:50%;
}

<div class="container">
<p> Some Cool content</p>
 
</div>

L'élément enfant ne devrait-il pas être à 50 % de 200 px (hauteur définie par l'élément parent) du haut de l'élément parent, soit 100 px du haut ?

Answer 1

Les marges basées sur un pourcentage sont calculées en fonction de la largeur du conteneur parent, quel que soit le côté de la marge.

Donc ce que vous voyez, c'est que la marge supérieure est égale à 50 % de la largeur.

Answer 2

De la spécification W3C :

Il y a deux bonnes raisons de baser les marges verticales sur la largeur du bloc contenant :

Cohérence horizontale et verticale

Bien sûr, il existe une propriété raccourcie qui permet de préciser les marges sur les quatre côtés du bloc :

margin: 10%;

Cela s'étend à :

margin-top: 10%;
margin-right: 10%;
margin-bottom: 10%;
margin-left: 10%;

Maintenant, si vous avez écrit l'une des choses ci-dessus, vous vous attendiez probablement à ce que les marges soient de taille égale sur les quatre côtés du bloc, n'est-ce pas ? Cependant, si margin-left et margin-right sont basés sur la largeur du conteneur, et margin-top et margin-bottom sont basés sur sa hauteur, ils seront généralement différents !

Évitez les dépendances circulaires

CSS présente le contenu en blocs empilés verticalement sur la page, de sorte que la largeur d'un bloc est généralement entièrement déterminée par la largeur de son élément parent. En d’autres termes, vous pouvez calculer la largeur du bloc sans vous soucier du contenu à l’intérieur du bloc.

La hauteur du bloc est une autre affaire. Généralement, la hauteur est déterminée par la hauteur combinée de son contenu. Changer la hauteur du contenu modifiera la hauteur du bloc. Voyez-vous le problème?

Pour obtenir la hauteur du contenu, vous devez connaître les marges supérieure et inférieure qui lui sont appliquées. Si ces marges dépendent de la hauteur du bloc parent, alors vous avez des problèmes car vous ne pouvez pas calculer l'une sans connaître l'autre !

Les marges verticales basées sur la largeur du conteneur brisent cette dépendance circulaire et rendent la mise en page possible.

Exemple :

Ceci est un exemple. Et le code :

HTML

<div class="container">
  <p id="element">一些很酷的内容</p>

</div>

<p>
  更多文本
</p>

CSS

.container {
  background: lightblue;
  padding: 10px;
  height: 100px;
  width: 500px;
}

p {
  display: block;
  border: 1px solid red;
  margin-top: 50%;
}

JS

window.onload = function(evt) {

  var element = document.getElementById("element"),
    style = element.currentStyle || window.getComputedStyle(element);

  element.textContent = "margin-top是：" + style.marginTop;
};