Question

The error can be found in this image... 我需要图像中的白色列表上升几个像素，但是当我尝试使用margin-bottom函数时，灰色列表之间会出现一个空格（id为leftmenu））而白色列表（id是newsmenu）代替。有什么办法可以解决这个问题吗？我尝试在本网站上使用几个代码回答类似问题的代码，但即便如此也不行。

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

Answer 1

改为使用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。

Answer 2

你在谈论这个空间吗？（见下图）

如果是，请从导航#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;
}

为什么保证金底部属性不起作用？

2 个答案: