Cette question a été posée plusieurs fois, laissez-moi vous donner une référence
Marges d'effondrement MDN
Marges d'effondrement

Selon la réponse de Jasonintju, je vais régler le problème :
Parce que la marge supérieure de mon élément enfant est plus grande que l'élément parent, j'utiliserai directement la marge supérieure de l'élément enfant

Élément parent au niveau du bloc et son premier/dernier élément enfant
Si l'élément parent au niveau du bloc n'a pas les quatre attributs de bordure supérieure, de remplissage supérieur, de contenu en ligne et de flotteur clair (pour la bordure supérieure et le remplissage supérieur, vous pouvez Dites également que lorsque la marge supérieure et la largeur de remplissage supérieure sont égales à 0), alors la marge supérieure de cet élément de niveau bloc et son premier élément enfant peuvent être considérés comme "proches l'un de l'autre". À ce moment, les marges supérieures de l'élément parent au niveau du bloc et de son premier élément enfant fusionneront. En d'autres termes, les marges affichées par l'élément parent à ce moment deviendront directement l'élément parent et son premier élément enfant. de la marge supérieure de l’élément enfant.
De même, si la marge inférieure de l'élément parent au niveau du bloc et la marge inférieure de son dernier élément enfant ne sont pas séparées par la bordure, le remplissage, le contenu en ligne, la hauteur, la hauteur minimale et la hauteur maximale du parent. élément, la fusion des marges se produira.

Citation : https://developer.mozilla.org...

Séparez simplement p et h1 et définissez un remplissage ou une bordure pour p