Question

在我的下面的代码中，所有内容都是写入的，但是它与浏览器屏幕的左上角和顶部之间的距离。

CSS代码是：

    ul {
    list-style:none;
    background:#2E94C7;
    padding:10px;
    color:white;
}

body ul li {
    position:relative;
}
ul, li {
    margin:0;
    padding:0;
}
li {
    display:inline-block;
    padding:10px;
}
ul li ul {
    display:none;
    position:absolute;
    width:100%;
    background:black;
    margin:10px 0 0 -10px;
}
ul li ul li {
    display:block;
}
ul li:hover ul {
    display:block;
}

HTML代码是：

<ul>
<li>Menu 1
    <ul>
        <li>Menu 1-1</li>
    </ul>
</li>
<li>Menu 2
    <ul>
        <li>Menu 2-1</li>
    </ul>
</li>
<li>Menu 3</li>
<li>Menu 4</li>

有没有办法覆盖浏览器屏幕的顶部，左侧和右侧。

Answer 1

试试这个

body {
    margin: 0;
    padding: 0;
}

身体标签上的自然边缘导致空间。您还可以结帐http://meyerweb.com/eric/tools/css/reset/以获取更多重置css相关内容。

Answer 2

body 元素默认具有边距。你需要做的就是覆盖它：

body { 
    margin:0; 
}

<强> jsFiddle demo.

Answer 3

尝试使用css重置块所以它会重置默认为浏览器的所有内容

http://html5doctor.com/html-5-reset-stylesheet/

Answer 4

我不确定我是否理解您的问题，但您可以尝试添加

* {
   margin: 0px;
}

到你的css顶部。

Answer 5

只需将其粘贴在CSS文件的顶部即可。

body {
margin: 0;
padding: 0;
width:100%;
}

浏览器屏幕和菜单之间的差距

5 个答案: