Warum funktioniert die Margin-Bottom-Eigenschaft nicht?

The error can be found in this image... Ich brauche die weiße Liste im Bild, um um einige Pixel nach oben zu gehen, aber wenn ich versuche, die Margin-Bottom-Funktion zu verwenden, erscheint ein Leerzeichen zwischen der grauen Liste (id is leftmenu) und der weißen farbige Liste (id ist newsmenu) statt. Gibt es eine Möglichkeit, dieses Problem zu beheben? Ich habe versucht, mehrere Code aus Antworten auf ähnliche Fragen auf dieser Website zu verwenden, aber selbst das scheint nicht zu funktionieren.Warum funktioniert die Margin-Bottom-Eigenschaft nicht?

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; 
}

Quelle

2016-05-16 C. Park

Warum nicht die Eigenschaft 'margin-top' verwenden? – keziah

Welche Liste genau? Deine Frage ist nicht klar genug. Sie haben auch einige Syntaxfehler (das 'br'-Tag muss nicht geschlossen werden) - siehe jsFiddle: https://jsfiddle.net/azizn/h1g20e8g/ – Aziz

Verwenden Sie' margin: 10px auto', um den Rand von top und Unterseite. – keziah

Verwenden margin-top stattdessen wie der ganze Rest der Objekte in Ihrem Dokument

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; 
    }

Dies wird Ihr Objekt der ausrichten sich ausruhen. Um es um mehrere Pixel zu erhöhen, senken Sie die 15px so viel wie Sie wollen.

Quelle

2016-05-16 09:13:55

Sprechen Sie über diesen Raum? (Siehe Bild unten)

Wenn ja, dann margin-top: 15px entfernen nav # LeftMenu, oder es 0 machen.

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; 
}

Quelle

2016-05-16 09:22:41

Eigentlich nein, ich spreche nicht über diesen Raum. Danke, dass du bereit bist zu helfen! –

Warum funktioniert die Margin-Bottom-Eigenschaft nicht?

Antwort

Verwandte Themen