Pourquoi une marge supérieure fait-elle baisser ma division et comment puis-je y remédier ?

La marge supérieure pousse la division vers le bas : solution révélée

L'application d'une marge supérieure au premier élément visible d'une page peut provoquer l'apparition de la totalité du contenu div pour descendre. Cela peut être particulièrement visible dans les sections d’en-tête. Pour résoudre ce problème, appliquez la propriété CSS suivante au div parent :

overflow: auto;

Cette propriété permet au div parent de s'adapter automatiquement à l'augmentation de la hauteur provoquée par la marge supérieure de l'élément enfant.

Voici un exemple d'extrait de code modifié incorporant la solution :

div#header{
    width: 100%;
    background-color: #eee;
    position: relative;
    overflow: auto;
}

div#header h1{
    text-align: center;
    width: 375px;
    height: 50px;
    margin: 50px auto;
    font-size: 220%;
    background: url('../../images/name_logo.png') no-repeat;
}

En ajoutant la propriété overflow: auto, le div #header se développera automatiquement en adapter la hauteur de l'élément h1, l'empêchant de pousser tout le collecteur vers le bas.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!