web-dev-qa-db-fra.com

CSS marge terroriste; La marge ajoute de l'espace en dehors de l'élément parent

Mes marges de css ne se comportent pas comme je le souhaite ou ne les attend pas. J'ai l'impression que mon en-tête margin-top affecte les balises div qui l'entourent.

C'est ce que je veux et attends:What I want....

... mais c'est ce avec quoi je me retrouve:What I get...

La source:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Margin test</title>

<style type="text/css">
body {
    margin:0;
}
#page {
    margin:0;
    background:#FF9;
}
#page_container {
    margin:0 20px;
}
h1 {
    margin:50px 0 0 0;
}
</style>

</head>

<body>

<div id="page">
    <div id="page_container">
        <header id="branding" role="banner">
            <hgroup>
                <h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1>
                <h2 id="site-description">Description</h2>
            </hgroup>
        </header>
    </div>
</div>

J'ai exagéré la marge dans cet exemple. La marge du navigateur par défaut sur h1-tag est un peu plus petite et dans mon cas, j’utilise Twitter Bootstrap, avec Normalizer.css qui définit la marge par défaut à 10px. Pas si important que ça, le point principal est; Je ne peux pas, je ne devrais pas, ne veut pas changer la marge sur la balise h1.

Je suppose que cela ressemble à mon autre question. Pourquoi ce style CSS margin-top ne fonctionne-t-il pas?. La question est comment puis-je résoudre ce problème spécifique?

J'ai lu quelques fils sur des problèmes similaires, mais je n'ai trouvé aucune réponse ou solution réelle. Je sais que l'ajout de padding:1px; ou border:1px; résout le problème. Mais cela n’ajoute que de nouveaux problèmes, car je ne souhaite pas de remplissage ni de bordure sur mes balises div.

Il doit y avoir une meilleure, meilleure pratique, solution? Cela doit être assez commun.

htmlcssoverflowmargin
102
jamietelin

Ajoutez overflow:auto à votre #page div.

Exemple jsFiddle

Et vérifier réduire les marges pendant que vous y êtes.

165
j08691

Ajoutez l'une des règles suivantes:

float: left/right;
position: absolute;
display: inline-block;
overflow: auto/scroll/hidden;
clear: left/right/both;

Ceci est causé par collapsing margins. Voir un article sur ce comportement ici .

Selon l'article:

La spécification W3C définit les marges de réduction comme suit:

"Dans cette spécification, l'expression" effondrement des marges "signifie que les marges adjacentes (pas de zones non vides de contenu, de remplissage ou de marge, ou de séparation ne les séparent) de deux boîtes ou plus (pouvant être adjacentes ou imbriquées) se combinent une seule marge. "

Ceci est également vrai pour les éléments parent-enfant.

Toutes les réponses incluent une des solutions possibles:

Il existe d'autres situations où les marges des éléments ne sont pas réduites:

  • éléments flottants
  • éléments absolument positionnés
  • éléments de bloc en ligne
  • éléments avec débordement défini sur autre chose que visible (ils ne réduisent pas les marges avec leurs enfants)
  • éléments effacés (ils ne réduisent pas leurs marges supérieures avec la marge inférieure de leur bloc parent.)
  • l'élément racine
31
Ziarno

Le problème était que le parent ne tenait pas compte de la taille des enfants. L'ajout de display:inline-block; l'a fait pour moi.

CSS complet

#page {
    margin:0;
    background:#FF9;
    display:inline-block;
    width:100%;
}

Voir Fiddle

13
jonBreizh

Les solutions dans les autres réponses ne m'ont pas fonctionné. Les bordures transparentes, le bloc en ligne, etc., ont tous causé d’autres problèmes. Au lieu de cela, j'ai ajouté le fichier CSS suivant à mon élément ancêtre:

parent::after{
  content: "";
  display: inline-block;
  clear: both;
}

Selon votre situation, cela peut entraîner des problèmes, car il ajoute un espace supplémentaire après le dernier élément enfant.

0
Trevor

Ajoutez simplement border-top: 1px solid transparent; à votre élément #page.

0
Amid