如何删除网页中的上边距？

Question

如何删除网页中的上边距？

我在创建的每个网页上都遇到过这个问题.我用来将我的内容放在页面中心的"主容器"div上面总是有一个上边距.我使用的是css样式表,并将正文中的边距和填充设置为0px,并在div中将边距和填充设置为0:

body{
    margin-top: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    margin-right: 0px;
    padding: 0;
    color: black; 
    font-size: 10pt; 
    font-family: "Trebuchet MS", sans-serif;
    background-color: #E2E2E2;
}

div.mainContainer{
    height: auto; 
    width: 68em;
    background-color: #FFFFFF;
    margin: 0 auto; 
    padding: 0;
}

Run Code Online (Sandbox Code Playgroud)

我已多次在网上看过,但我能看到的就是设置这些边距和填充属性.还有什么我应该做的吗？IE和Firefox中存在边距.

以下是对代码的更全面的了解(它处于创建的开始阶段,因此其中没有太多......)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- TemplateBeginEditable name="doctitle" -->
        <title></title>
        <!-- TemplateEndEditable -->
        <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
        <link href="../Styles/KB_styles1.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="mainContainer">
            <p>Here is the information</p>
        </div>
    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

这是CSS:

@charset "utf-8";
/* CSS Document */

body{
    margin-top: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    margin-right: 0px;
    padding: 0;
    color: black; 
    font-size: 10pt; 
    font-family: "Trebuchet MS", sans-serif;
    background-color: #E2E2E2;
}

/* ---Section Dividers --------------------------------------------------------------*/
div.mainContainer{
    position: relative; 
    height: auto; 
    width: 68em;
    background-color: #FFFFFF;
    margin: 0 auto; 
    padding: 0;
}

div.header{
    padding: 0; 
    margin: 0;
}

div.leftSidebar{
    float: left;
    width: 22%; 
    height: 40em;
    margin: 0;
}

div.mainContent{
    margin-left: 25%;
}

div.footer{
    clear: both;
    padding-bottom: 0em; 
    margin: 0;
}

/* Hide from IE5-mac. Only IE-win sees this. \*/
   * html div.leftSidebar { margin-right: 5px; }
   * html div.mainContent {height: 1%; margin-left: 0;}
/* End hide from IE5/mac */

Run Code Online (Sandbox Code Playgroud)

Answer 1

str*_*ger 91

你的第一个元素h1还是类似的？那个元素margin-top可能会导致看起来像是一个边缘body.

谢谢你,先生,你只是饶了我几条白发 (4认同)

Answer 2

sag*_*gar 59

我有类似的问题,通过以下CSS解决了这个问题:

body {    
    margin: 0 !important;
    padding: 0 !important;
}

Run Code Online (Sandbox Code Playgroud)

Answer 3

jwb*_*ove 28

重置所有元素边距的最佳方法是使用css星号规则.

将其添加到@charset下的css顶部:

* {
   margin: 0px;
   padding: 0px;
}

Run Code Online (Sandbox Code Playgroud)

这将取消所有预设的边距和填充所有元素body,h1,h2,p等.现在,您可以使用浏览器刷新页面的顶部或标题以及其他div中的任何图像或文本.

完全不正确的解决方案.http://stackoverflow.com/a/1714258/575657 (20认同)
最好调整正确的标签,比如<p>或<h2>,而不是绕过问题,导致许多其他问题. (2认同)
这就是我的解决方案。奇怪的是 HTML 以 html 和 body 标签开头。他们在顶部留出空白。将 html 和 body 指定为 padding/marging: 0. 没有帮助。但星号确实如此。虽然我在顶部找不到任何其他标签。 (2认同)

Answer 4

小智 12

CSS中的许多元素都有默认填充和边距设置.因此,当您开始构建新网站时,reset.css准备好文件总是好的.添加此项以使其擦除默认值,以便您可以更好地控制网页.

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}


/* Extra options you might want to consider*/

table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
input{
    border:1px solid #b0b0b0;
    padding:3px 5px 4px;
    color:#979797;
    width:190px;
}
address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { 
    border:0;
}

Run Code Online (Sandbox Code Playgroud)

我希望这可以帮助所有开发人员,这对我来说在我学习的过程中有些困扰.