Question

<html>
<head>
<style type="text/css">
         #wholeborder{
        background-color : #f2f2f2;
        border-radius:5px;
        border:1px solid #222;
        resize:both;
        width:700px;
        height:320px;
        overflow:auto;

        }

        #navigatorForLinkedIN{
         height:70px;
        }
        ul#breadcrumbs{
            list-style:none;
            /* optional */
            margin:100px;
            padding:10px 2px 10px 10px;
            background:#f2f2f2;
            width:500px;
            height:30px;
            border-radius:5px;
            border:1px solid #222;
            -moz-box-shadow:0 0 3px 0 #000;

        }
        ul#breadcrumbs li{
            float:left;
            background:;
            height:30px;
            padding:0 23px 0 10px;
            text-align:center;
            text-decoration:none;
            text-color:#7a7a7a;
            line-height:32px;
        }
        ul#breadcrumbs li.active{
            background:url(../images/greenNav.png)no-repeat right;
            color:#fff;
        }
        ul#breadcrumbs li a{
            display:block;
            text-decoration:none;
            color:#2d2d2d;
            line-height:32px;
            text-shadow:0 0 1px #222;
        }
        ul#breadcrumbs li a:hover{
            color:#000000;
            background: url(../images/greenNav.png);
        }

    </style>

</head>
<body>
<div class="wholeborder" id="wholeborder">
            <div class="navigatorForLinkedIN" id="navigatorForLinkedIN">
                <ul id="breadcrumbs">
                    <li class="active"><a href="">Connect with LinkedIn</a></li>
                    <li><a href="">Invite Friends</a></li>
                    <li><a href="">Complete Profile</a></li><a href="">
                </a></ul><a href="">
             </a></div><a href="">
                </a><div class="linkedInLoginBox"><a href="">
                    <div class="head">
                        Discover contacts that can help you land your next job
                    </div>
                    </a><div class="body"><a href="">
                        </a><a class="sn-in" href="" title="Sign into LinkedIn" id="sn-lk-sign" rel="nofollow"><span class="sn-in-sign-span">Sign into LinkedIn</span></a>
                        <div class="disclaimer">
                        All information and activity will be kept private. <a href="" target="_blank">Learn More</a>
                        </div>
                    </div>
                </div>
            </div>

</body>
</html>

这是我的html页面

Answer 1

保证金是100px，那是什么推下来

        ul#breadcrumbs{
        list-style:none;
        /* optional */
        margin:100px;
        padding:10px 2px 10px 10px;
        background:#f2f2f2;
        width:500px;
        height:30px;
        border-radius:5px;
        border:1px solid #222;
        -moz-box-shadow:0 0 3px 0 #000;

    }

更改此边距，100将其推下，您可以使用类似的东西。

margin-top:;
margin-left:;
margin-right:;
margin-bottom:;

Answer 2

您在ul＃breadcrumbs上有一个样式：margin:100px;您可以将其更改为margin:0 100px 100px。不过，您可能还想设置body和html容器的边距和填充：

html, body{
  margin:0;
  padding:0;
}

Answer 3

我更新了您可以从链接中查看的小提琴。

更新代码：

/* optional */
margin:10px 100px;

原来的一个是margin:100px，它意味着来自各方的100px。但10px 100px表示上/下：10px |左/右：100px的;

您的更新小提琴：http://jsfiddle.net/sLV5h/2/

Answer 4

检查Js小提琴

http://jsfiddle.net/Ydbre/

在margin:100px

中删除了ul#breadcrumbs

Answer 5

喜欢在小提琴中说http://jsfiddle.net/sLV5h/1/：

答案是改变

ul#breadcrumbs{
    list-style:none;
    /* optional */
    margin:100px;                 <-------This Line
    padding:10px 2px 10px 10px;
    background:#f2f2f2;
    width:500px;
    height:30px;
    border-radius:5px;
    border:1px solid #222;
    -moz-box-shadow:0 0 3px 0 #000;

}


    ul#breadcrumbs{
        list-style:none;
        /* optional */
        margin:0px 100px 100px 100px;     <----- by this (or something else)
        padding:10px 2px 10px 10px;
        background:#f2f2f2;
        width:500px;
        height:30px;
        border-radius:5px;
        border:1px solid #222;
        -moz-box-shadow:0 0 3px 0 #000;

    }

（向黑暗骑士致敬）

如何从顶部删除额外的空间？

5 个答案: