トップマージン値は何もしていませんか？

Question

私はこの質問が以前に尋ねられたことを知っています。私はちょうどウェブデザインを練習しており、武道学校のウェブサイトを作るふりをしています（ナッシュビルの自衛隊は実際のビジネスではありません）。

問題があります。#Sloganの先頭の余白の値が機能していないようです。実際には、上下のマージンを稼働させることは、私が絶えず遭遇してきた長引く問題でした。

結果：

誰もがこの問題を解決することはできますか？

#Title { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: greenyellow; 
 
    width: 50%; 
 
    float: left; 
 
    margin-left: 45px; 
 
    margin-top: 10px; 
 
    margin-bottom: 0; 
 
    height: 42px; 
 
} 
 

 
#Title h1 { 
 
    font-family: Stencil, sans-serif; 
 
    font-size: 42px; 
 
    margin-top: 2px; 
 
    margin-left: 9px; 
 
} 
 

 
#Slogan { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: green; 
 
    width: 50%; 
 
    height: 50px; 
 
    float: left; 
 
    margin-left: 14%; 
 
    margin-top: none; 
 
    display: inline-block; 
 
}

<div id="Container"> 
 
    <div id="TopofPage"> 
 
    <div id="Title"> 
 
     <h1>Nashville Self-DEfense</h1> 
 
     <div id="Slogan"></div> 
 
    </div> 
 
    <div id="SocialMedia"></div> 
 
    <!--not shown in image--> 
 
    </div> 
 
<div id="TopMenu"> 
 
    <ul> 
 
     <li><a href="#home">HOME</a></li> 
 
     <li><a href="#news">CLASSES</a></li> 
 
     <li><a href="#contact">STORE</a></li> 
 
     <li><a href="#about">ABOUT</a></li> 
 
     <li><a href="#about">CONTACT</a></li> 
 
    </ul> 
 
</div>

代わり margin-top:none;使用の

Answer 1

margin-top: 0px !important

Answer 2

それは margin-top: 0; ない margin-top: none;

次の事は、それは限り、 '0' で高く行くでなければなりません前の要素（#title h1）に余白が設定されています。

Answer 3

達成しようとしていることはまだ不明です。

#Title h1と#Slogan要素の間隔を減らしたい場合は、#Title h1要素の下余白を減らす必要があります。

#Title { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: greenyellow; 
 
    width: 50%; 
 
    float: left; 
 
    margin-left: 45px; 
 
    margin-top: 10px; 
 
    margin-bottom: 0; 
 
    height: 42px; 
 
} 
 

 
#Title h1 { 
 
    font-family: Stencil, sans-serif; 
 
    font-size: 42px; 
 
    margin-bottom: 10px; // <-- added 
 
    margin-top: 2px; 
 
    margin-left: 9px; 
 
} 
 

 
#Slogan { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: green; 
 
    width: 50%; 
 
    height: 50px; 
 
    float: left; 
 
    margin-left: 14%; 
 
    margin-top: none; 
 
    display: inline-block; 
 
}

<div id="Container"> 
 
    <div id="TopofPage"> 
 
    <div id="Title"> 
 
     <h1>Nashville Self-DEfense</h1> 
 
     <div id="Slogan"></div> 
 
    </div> 
 
    <div id="SocialMedia"></div> 
 
    <!--not shown in image--> 
 
    </div> 
 
<div id="TopMenu"> 
 
    <ul> 
 
     <li><a href="#home">HOME</a></li> 
 
     <li><a href="#news">CLASSES</a></li> 
 
     <li><a href="#contact">STORE</a></li> 
 
     <li><a href="#about">ABOUT</a></li> 
 
     <li><a href="#about">CONTACT</a></li> 
 
    </ul> 
 
</div>