5 votes

Comportement bizarre des CSS... supprimer une bordure de 1px fait bouger <DIV> d'environ 20px

J'ai les éléments suivants :

CSS

#pageBody
{
    height: 500px;
    padding:0;
    margin:0;
    /*border: 1px solid #00ff00;*/
}

#pageContent
{
    height:460px;
    margin-left:35px;
    margin-right:35px;
    margin-top:30px;
    margin-bottom:30px;
    padding:0px 0 0 0;
}

HTML

    <div id="pageBody"> 
    <div id="pageContent"> 
        <p> 
        blah blah blah
        </p> 
    </div> 
    </div> 

Si je décommente la ligne de bordure dans pageBody, tout s'adapte parfaitement... J'ai gardé la bordure pour vérifier que tout se passe comme prévu. Mais en enlevant la bordure, pageBody descend la page d'environ 20px, alors que pageContent ne semble pas bouger du tout.

Il ne s'agit pas de la vraie page, mais d'un sous-ensemble. Si rien n'est évident, je peux essayer de générer un échantillon minimal fonctionnel, mais j'ai pensé qu'il pourrait y avoir une réponse rapide et facile d'abord.

Je rencontre exactement le même problème dans Chrome et IE8, ce qui suggère que c'est moi et non le navigateur. Des conseils pour savoir où chercher ? Je me suis demandé si la bordure de 1px n'était pas un point de basculement rendant le contenu d'une division trop grand, mais le fait de modifier la hauteur de #pageContent à 400, par exemple, ne fait aucune différence, si ce n'est que le bas de cette division est coupé.

5voto

Konerak Points 22484

Apparemment, lorsque vous ajoutez une bordure ou une marge à l'écran d'affichage des pageBody , le sommet de pageContent est calculé comme suit pageBody.border + pageBody.margin + pageContent.margin-top . Sinon, il semble ignorer le pageContent.margin-top .

Il s'agit d'un cas typique de effondrement des marges

3voto

ANeves Points 2711

Les marges s'effondrent.
(Visible en donnant à #pageBody un fond rouge et à #pageContent un fond bleu).

En d'autres termes, étant donné que les deux éléments sont des blocs et que les marges se touchent, ils s'effondrent ensemble et le plus grand reste en vigueur.
S'il y a une bordure ou un rembourrage entre les deux marges, elles ne sont pas contiguës et ne se réduisent donc pas.

C'est un comportement attendu : http://www.w3.org/TR/CSS2/box.html#collapsing-margins

1voto

Shawn Steward Points 4632

Essayez de régler position: relative; sur vos div's... J'ai déjà eu cette solution pour des problèmes similaires.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X