マージンボトムのプロパティが機能しないのはなぜですか？

The error can be found in this image...私は、いくつかのピクセルで上に行くために画像の白のリストが必要ですが、余白 - 底の関数を使用しようとすると、灰色の色のリスト（idは左メニュー）（idはニュースメニューです）。この問題を解決できる方法はありますか？私はこのウェブサイトで同様の質問に対する回答からいくつかのコードを使用しようとしましたが、それでもうまくいかないようです。マージンボトムのプロパティが機能しないのはなぜですか？

HTML：

<!DOCTYPE html> 
<html manifest="developer.manifest"> 
<head> 
<link rel="stylesheet" href="css/style.css" type="text/css"> 
<title>Website</title> 
</head> 

<body> 
    <div id="container"> 
     <header> 
      <h1>Website</h1> 
     </header> 

     <nav id="menu"> 
      <ul> 
       <li class="menuitem"><a href="index.html">HOME</a></li> 
       <li class="menuitem"><a href="index.html">STUFF</a></li> 
       <li class="menuitem"><a href="index.html">STUFF</a></li> 
       <li class="menuitem"><a href="index.html">STUFF</a></li> 
      </ul> 
     </nav> 

      <nav id="leftmenu"> 
      <h4>Random sentence.</h4> 
       <ul> 
        <li><a href="index.html">List</a></li> 
        <li><a href="index.html">List</a></li> 
        <li><a href="index.html">List</a></li> 
        <li><a href="index.html">List</a></li> 
        <li><a href="index.html">List</a></li>> 
       </ul> 
       <br></br> 
      </nav> 

      <img class="displayed" src="images/kurtar.jpg" alt="Stuff"> 

      <nav id="rightmenu"> 
      <h4>Random Sentence.</h4> 
       <ul> 
        <li><a href="index.html">List</a></li> 
        <li><a href="index.html">List</a></li> 
        <li><a href="index.html">List</a></li> 
        <li><a href="index.html">List</a></li> 
        <li><a href="index.html">List</a></li> 
       </ul> 
       <br></br> 
      </nav> 

      <!--This is the list that I want margin-bottom to move up.--> 
      <div id="newsmenu"> 
      <h4>Latest MOCing News:</h4> 
       <ul> 
        <li>[NEW] 5/7/2016: Website undergoing development...</li> 
       </ul> 
       <br></br> 
      </div> 

    </div><!--container end--> 

    <div class="clear"></div> 
</body> 
</html>

はCSS：ドキュメント内

*{ 
    margin: 0 auto 0 auto; 
} 

body{ 
    font-size:13px; 
    font-family:"Verdana"; 
    color:#ffffff; 
    background-color:#ffffff; 
    background-image:url(../images/background.jpg); 
    background-repeat:repeat-x; 
} 

a{ 
    text-decoration:none; 
} 

p{ 
    margin:10px 0; 
} 

/* Main styles */ 
#container{ 
    width:1000px; 
    overflow:auto; 
} 

.displayed { 
    margin: 15px 0 250px 40px; 
    border-width:7px; 
    border-color:#606060; 
    border-style:outset; 
} 

header{ 
    font-weight:bold; 
    font-family:"Georgia"; 
    width:98.6%; 
    height:85px; 
    background:#ffffff; 
    border-width:7px; 
    border-color:#DFDFDF; 
    border-style:outset; 
    margin-top:20px; 
    padding-top:15px; 
} 

header h1{ 
    color:#D4AF37; 
    font-size:43px; 
    padding:10px 0 0 0; 
    text-align:center; 
} 

aside { 
    color:white; 
} 

nav#menu{ 
    display:block; 
    clear:both; 
    width:98.5%; 
    height:30px; 
    background:#494949; 
    border-width:7px; 
    border-color:#606060; 
    border-style:outset; 
    margin-top:15px; 
} 

nav#menu ul{ 
    padding:0; 
    padding-top:7px; 
    width:960px; 
} 

nav#menu li{ 
    padding:0; 
    display:inline; 
} 

nav#menu li a,#menu li a:visited{ 
    color:#ffffff; 
    text-decoration:none; 
    text-align:center; 
    font-size:13px; 
    font-weight:bold; 
    padding:0 13px 0 13px; 
} 

nav#leftmenu{ 
    margin-top:15px; 
    width:190px; 
    float:left; 
    background:#C0C0C0; 
    border-width:7px; 
    border-color:#B6B6B6; 
    border-style:outset; 
    padding: 15px 20px 0 10px; 
} 

nav#leftmenu ul{ 
    list-style:none; 
    padding:0; 
} 

nav#leftmenu li{ 
    list-style:none; 
    padding:15px 0 8px 0; 
    border-bottom:1px dashed #000000; 
} 

nav#leftmenu a,nav#leftmenu a:visited{ 
    color:#000000; 
    text-decoration:none; 
    font-size:12px; 
} 

nav#leftmenu h4{ 
    color:#000000; 
    padding:0; 
    padding-bottom:8px; 
    border-bottom:#000000 solid 2px; 
    font-size:12px; 
} 

nav#rightmenu{ 
    margin-top:15px; 
    width:190px; 
    float:right; 
    background:#C0C0C0; 
    border-width:7px; 
    border-color:#B6B6B6; 
    border-style:outset; 
    padding: 15px 20px 0 10px; 
} 

nav#rightmenu ul{ 
    list-style:none; 
    padding:0; 
} 

nav#rightmenu li{ 
    list-style:none; 
    padding:15px 0 8px 0; 
    border-bottom:1px dashed #000000; 
} 

nav#rightmenu a,nav#rightmenu a:visited{ 
    color:#000000; 
    text-decoration:none; 
    font-size:12px; 
} 

nav#rightmenu h4{ 
    color:#000000; 
    padding:0; 
    padding-bottom:8px; 
    border-bottom:#000000 solid 2px; 
    font-size:12px; 
} 

div#newsmenu{ 
    width:190px; 
    float:left; 
    background:#ffffff; 
    border-width:7px; 
    border-color:#DFDFDF; 
    border-style:outset; 
    padding: 15px 20px 0 10px; 
    position:relative; 
    margin-bottom:200px; 
} 

div#newsmenu ul{ 
    list-style:none; 
    padding:0; 
} 

div#newsmenu li{ 
    list-style:none; 
    padding:15px 0 8px 0; 
    border-bottom:1px dashed #000000; 
    color:blue; 
    font-size:11px; 
} 

div#newsmenu a,div#newsmenu a:visited{ 
    color:#000000; 
    text-decoration:none; 
    font-size:12px; 
} 

div#newsmenu h4{ 
    color:#000000; 
    padding:0; 
    padding-bottom:8px; 
    border-bottom:#000000 solid 2px; 
    font-size:12px; 
}

出典

2016-05-16 C. Park

なぜ「margin-top」プロパティを使用しないのですか？ – keziah

どのリストが正確ですか？あなたの質問は十分ではありません。また、いくつかの構文エラーがあります（ 'br'タグを閉じる必要はありません）。jsFiddle：https://jsfiddle.net/azizn/h1g20e8g/ – Aziz

を参照して、marginと10px autoのマージンを調整します。下。 – keziah

使用margin-top代わりに、オブジェクトのすべての残りのような

div#newsmenu { 
     width: 190px; 
     float: left; 
     background: #ffffff; 
     border-width: 7px; 
     border-color: #DFDFDF; 
     border-style: outset; 
     padding: 15px 20px 0 10px; 
     position: relative; 
     /*margin-bottom: 200px; Delete this one*/ 
     margin-top:15px; 
    }

これはにあなたのオブジェクトを整列させます残り。それを複数のピクセルでさらに増やすには、15pxを必要なだけ減らしてください。

出典

2016-05-16 09:13:55

あなたはこのスペースについて話していますか？ yesの場合、NAV＃1 leftmenuからmargin-top: 15pxを削除、またはそれ0作る

を（画像の下を参照）。

nav#leftmenu { 
    background: #c0c0c0 none repeat scroll 0 0; 
    border-color: #b6b6b6; 
    border-style: outset; 
    border-width: 7px; 
    float: left; 
    margin-top: 0; /* Changes needs to be make here. */ 
    padding: 15px 20px 0 10px; 
    width: 190px; 
}

出典

2016-05-16 09:22:41

実際、私はその空間について話していません。しかし、喜んで助けてくれてありがとう！ –

マージンボトムのプロパティが機能しないのはなぜですか？

答えて

関連する問題