0

基本的に、コンテナ div とスローガン div があります。スローガン div にマージンを適用すると、コンテナ div にも適用されますが、理由がわかりません。親 div を移動する理由について、誰かが私を正しい方向にプッシュできますか?

HTML:

<div id="container">
<ul>
<a href=""><li>Home</li></a>
<a href=""><li>About</li></a>
<a href=""><li>School Sessions</li></a>
<a href=""><li>Summer</li></a>
<a href=""><li>Online Classes</li></a>
<a href=""><li>Register</li></a>
<a href=""><li>Contact</li></a>
</ul>
<div id="slogan">

</div>
</div>

CSS:

*{
    margin:0;
    padding:0;  
}
body{
    background: #7559a6;
    font-family: 'Open Sans', sans-serif;   
}
#container{
    position:relative;
    width:1000px;
    height:500px;
    margin:auto;
    background:white;
}
ul{
    position:absolute;
    right:0px;
    background:rgba(77, 77, 77, 0.75);  
    border-radius:12px;
    margin:25px 0px;
    padding:5px;
}
ul li{
    display:inline-block;   
    list-style:none;
    color:white;
    padding:5px 10px;
}
ul li a{
    text-decoration:none;   
    color:inherit;
}
#slogan{
    width:1000px;
    height:300px;
    background:blue;
    margin-top:50px;
}
4

4 に答える 4

0

これの主な理由は、マージンの崩壊が機能する方法によるものです。詳細については、http: //reference.sitepoint.com/css/collapsingmarginsをご覧ください。

あなたが見ている余分なスペースは、実際にはあなたのスローガンからはみ出している余白です. マージンの折りたたみは、段落やリスト項目などでは非常に便利ですが、ここではあまり意味がありません。

基本的に、コンテナの上部に 1px のパディングを追加します。

padding-top: 1px

さらに、同じ効果を持つ 1px のボーダートップ ルールを追加できます。

border-top: 1px solid white

幸運を！

于 2013-05-23T04:20:48.163 に答える