CSSマージンの競合

Question

私のメニューを保持するcontainerとtop_menuという2つのクラスがあります。

これはどういうことかわかりませんが、コンテナクラスでdivを定義するたびに、メニューの上部に余白ができます。コンテナのdivを削除すると、メニューには通常どおりに余白が表示されません。

どうすればこの問題を解決できますか？それは技術的にページ上0高さを占有しているので、

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

あなた.top_menu浮いている子供たち： はここに例を示します。そのメニューのある種のclearfixを使って、ページの残りの要素がそのレイアウトを尊重するようにします。 .clearfixクラスを追加して、親要素の子要素の浮動小数点数をクリアしたいときはいつでも再利用できます。

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>