html - Une question dans le guide faisant autorité CSS (liée au modèle Box)

Question

css权威指南中第173页的这段话是什么意思?“注意”中的描述貌似和代码与示意图没什么联系

Answer 1

Il semble y avoir quelque chose qui ne va pas avec cette image, je ne sais pas s'il y a un contexte

1. Légende de l'image En ce qui concerne les marges, cela doit faire référence à la marge, mais p n'est pas défini et la valeur par défaut est 0

2. La partie argentée autour de 30px+20px = 50px, les deux p sont séparés de 20px, cela devrait être une relation de 5:2, l'inspection visuelle de l'image est de 2:1

3. p le remplissage est de 0, sauf si la police est spéciale, le texte doit être proche du côté gauche et la lettre p doit être proche du bord inférieur

Answer 2

Le padding-top de l'élément parent poussera l'élément enfant vers le bas, et
le margin-top de l'élément enfant se déplacera vers le bas pour laisser une marge.
Donc, même si le margin-top -10px de votre élément enfant le déplace vers le haut de 10px
mais que l'élément parent ajoute un padding-top de 10px, il apporte également un décalage à l'élément enfant et le déplace à nouveau vers le bas de 10px, ce qui signifie que ce n'est pas le cas. bouger