このプロジェクトで問題が発生し、divがその上のdivとの間にギャップがあるように見えました。デバッグ後、ギャップは上部だけでなく下部にもあることがわかりました。
overflow:auto
を追加したときまたは
overflow:hidden
、神秘的なギャップが消え、divが(必要に応じて)タッチしますが、
overflow:visible
を設定するとまたはまったく設定しないでください。上下で約40ピクセルが取られます。なぜこれをしているのですか?
たとえば、完全なJSFiddle、
overflow:auto
を追加するだけCSSの「ヒーローコンテナ」に「修正」します。
#header{
height: 50px;
background-color: #05568D;
border-radius: 10px 10px 0px 0px;
position: relative;
}
#header > ul{
list-style-type: none;
padding: 0px 20px 0px 20px;
margin: 0px;
background-color:darkmagenta;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
#header > ul > li{
padding: 0px 10px 0px 10px;
color: white;
font-size: 20px;
float: left;
background-color: red;
}
#hero{
background-color: white;
border-radius: 0px 0px 10px 10px;
}
#hero-container{
margin: 0px 100px 0px 100px;
background-color: red;
overflow: visible;
}
body{
background: #0769AD;
margin: 0;
padding: 0;
font-family: 'Teko', sans-serif;
}
.container{
width: 96%;
margin: 0 auto;
}
<div id="header" class="container">
<ul>
<li>Download</li>
<li>API Documentation</li>
<li>Blog</li>
<li>Plugins</li>
<li>Browser Support</li>
</ul>
</div>
<div id="hero" class="container">
<div id="hero-container">
<p>This is a paragraph</p>
</div>
</div>
私は困惑しているので、誰かがこの論理を私に説明してもらえますか。単なる
<p>
の場合、オーバーフローの必要性は何ですかそしてその親の身長も設定されていますか?
なぜなら
<p></p>
*{margin:0;padding:0;box-sizing:border-box;}
を設定した場合、デフォルトのマージン上部と下部があります この問題はありません。