Conflit de marge CSS

Question

J'ai deux classes, un container et un top_menu qui contient mon menu. Je ne sais pas comment cela se produit mais chaque fois que je définis une div avec la classe conteneur, mon menu crée une marge sur son sommet. Si je supprime le conteneur div, le menu n'obtient pas la marge comme il devrait normalement le faire.

Comment puis-je résoudre ce problème? Voici un exemple:

body { 
 
    margin: 0; 
 
    color:#484848; 
 
    font-family: 'Verdana', sans-serif; 
 
} 
 
.container { 
 
    left: 0; 
 
    right: 0; 
 
    margin: 10px auto 10px auto; 
 
    width: 95%; 
 
    border-radius: 4px; 
 
    background: #e1e1e1; 
 
} 
 
.top_menu { 
 
    width: 100%; 
 
} 
 
ul.horizontal-menu, .horizontal-menu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.horizontal-menu { 
 
    float: left; 
 
    width:100%; 
 
    background: #616161; 
 
} 
 
.horizontal-menu li { 
 
    float: left; 
 
    display: block; 
 
    padding: 25px; 
 
    color: #FFFFFF; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    -webkit-transition: border-color .218s; 
 
    -moz-transition: border .218s; 
 
    -o-transition: border-color .218s; 
 
    transition: border-color .218s; 
 
    background: #616161; 
 
    cursor: pointer; 
 
} 
 
.horizontal-menu li .material-icons { 
 
    margin: -10px; 
 
} 
 
.hideshow ul li { 
 
    width: 250px; 
 
    text-align: center; 
 
} 
 
.horizontal-menu li:hover { 
 
    border-bottom: 3px solid rgb(246,83,20); 
 
    padding-bottom: 22px; 
 
    background: #484848; 
 
} 
 
.horizontal-menu li.hideshow ul { 
 
    position:absolute; 
 
    display:none; 
 
    left: -203px; 
 
    width: 300px; 
 
} 
 
.horizontal-menu li.hideshow { 
 
    position:relative; 
 
} 
 
.hideshow ul { 
 
    padding-bottom: 7px; 
 
    background: #616161; 
 
    border-radius: 0px 0px 4px 4px; 
 
    margin-top: 25px; 
 
} 
 
.top_menu_extra { 
 
    background-color: #616161; 
 
    width: 100%; 
 
    display: none; 
 
    border: 0 solid #484848; 
 
    border-top-width: 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Top Menu --> 
 
<div class="top_menu"> 
 
    <ul class="horizontal-menu"> 
 
    <li id="sub">&nbsp;<i class="material-icons">search</i>&nbsp;</li> 
 
    <li data-link="http://www.google.com">MENU 1</li> 
 
    <li data-link="http://www.google.com">MENU 2</li> 
 
    <li data-link="http://www.google.com">MENU 3</li> 
 
    <li data-link="http://www.google.com">MENU 4</li> 
 
    <li data-link="http://www.google.com">MENU 5</li> 
 
    <li data-link="http://www.google.com">MENU 6</li> 
 
    <li data-link="http://www.google.com">MENU 7</li> 
 
    <li data-link="http://www.google.com">MENU 8</li> 
 
    <li data-link="http://www.google.com">MENU 9</li> 
 
    <li data-link="http://www.google.com">MENU 10</li> 
 
    <li data-link="http://www.google.com">MENU 11</li> 
 
    </ul> 
 
</div> 
 

 

 
<!-- Container --> 
 
<div class="container"> 
 
    Container 
 
</div> 
 

 
<h1 class="txt-center">TEXT</h1>

Answer 1

Votre .top_menu a flottaient les enfants, il occupe techniquement 0 hauteur sur la page. Utilisez une sorte de clearfix sur ce menu pour que le reste des éléments de la page respecte sa mise en page. J'ai ajouté une classe .clearfix ici que vous pouvez réutiliser chaque fois que vous voulez effacer les éléments flottants des enfants sur un élément parent.

body { 
 
    margin: 0; 
 
    color:#484848; 
 
    font-family: 'Verdana', sans-serif; 
 
} 
 
.container { 
 
    left: 0; 
 
    right: 0; 
 
    margin: 10px auto 10px auto; 
 
    width: 95%; 
 
    border-radius: 4px; 
 
    background: #e1e1e1; 
 
} 
 
.top_menu { 
 
    width: 100%; 
 
} 
 
ul.horizontal-menu, .horizontal-menu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.horizontal-menu { 
 
    float: left; 
 
    width:100%; 
 
    background: #616161; 
 
} 
 
.horizontal-menu li { 
 
    float: left; 
 
    display: block; 
 
    padding: 25px; 
 
    color: #FFFFFF; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    -webkit-transition: border-color .218s; 
 
    -moz-transition: border .218s; 
 
    -o-transition: border-color .218s; 
 
    transition: border-color .218s; 
 
    background: #616161; 
 
    cursor: pointer; 
 
} 
 
.horizontal-menu li .material-icons { 
 
    margin: -10px; 
 
} 
 
.hideshow ul li { 
 
    width: 250px; 
 
    text-align: center; 
 
} 
 
.horizontal-menu li:hover { 
 
    border-bottom: 3px solid rgb(246,83,20); 
 
    padding-bottom: 22px; 
 
    background: #484848; 
 
} 
 
.horizontal-menu li.hideshow ul { 
 
    position:absolute; 
 
    display:none; 
 
    left: -203px; 
 
    width: 300px; 
 
} 
 
.horizontal-menu li.hideshow { 
 
    position:relative; 
 
} 
 
.hideshow ul { 
 
    padding-bottom: 7px; 
 
    background: #616161; 
 
    border-radius: 0px 0px 4px 4px; 
 
    margin-top: 25px; 
 
} 
 
.top_menu_extra { 
 
    background-color: #616161; 
 
    width: 100%; 
 
    display: none; 
 
    border: 0 solid #484848; 
 
    border-top-width: 1px; 
 
} 
 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Top Menu --> 
 
<div class="top_menu clearfix"> 
 
    <ul class="horizontal-menu"> 
 
    <li id="sub">&nbsp;<i class="material-icons">search</i>&nbsp;</li> 
 
    <li data-link="http://www.google.com">MENU 1</li> 
 
    <li data-link="http://www.google.com">MENU 2</li> 
 
    <li data-link="http://www.google.com">MENU 3</li> 
 
    <li data-link="http://www.google.com">MENU 4</li> 
 
    <li data-link="http://www.google.com">MENU 5</li> 
 
    <li data-link="http://www.google.com">MENU 6</li> 
 
    <li data-link="http://www.google.com">MENU 7</li> 
 
    <li data-link="http://www.google.com">MENU 8</li> 
 
    <li data-link="http://www.google.com">MENU 9</li> 
 
    <li data-link="http://www.google.com">MENU 10</li> 
 
    <li data-link="http://www.google.com">MENU 11</li> 
 
    </ul> 
 
</div> 
 

 

 
<!-- Container --> 
 
<div class="container"> 
 
    Container 
 
</div> 
 

 
<h1 class="txt-center">TEXT</h1>