发表新帖
发表新帖

How do I remove the top margin in a web page?

前端 未结
关注
17 974
眼角桃花
眼角桃花 2020-11-29 02:26

I have had this problem with every web page I have created. There is always a top margin above the \'main container\' div I use to place my content in the center of the pag

相关标签:
17条回答
  • 失恋的感觉
    2020-11-29 03:25

    The best way to reset margins for all elements is to use the css asterisk rule.

    Add this to the top of your css under the @charset:

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

    This will take away all the preset margins and padding with all elements body,h1,h2,p,etc. Now you can make the top or header of your page flush with the browser along with any images or text in other divs.

    0 讨论(0)
  • 清酒与你
    2020-11-29 03:25

    I had same problem. It was resolved by following css line;

    h1{margin-top:0px}

    My main div contained h1 tag in the beginning.

    0 讨论(0)
  • 刺人心
    2020-11-29 03:27

    Here is the code that everyone was asking for -- its at the very beginning of development so there isn't much in it yet, which may be helpful...

    <!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">
  <div class="header">  </div>
  <div class="mainContent">  </div>
 <div class="footer">  </div> 
</div>
</body>
</html>

    Here is the 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;}

html{padding: 0; margin: 0;}

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

div.header{padding: 0; margin-bottom: 1em;}

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 */
    0 讨论(0)
  • 长发绾君心
    2020-11-29 03:27

    For opera just add this in header

    <link rel='stylesheet' media='handheld' href='body.css' />

    This makes opera use most of your customised css.

    0 讨论(0)
  • 情话喂你
    2020-11-29 03:29

    you may also check if:

    {float: left;}

    and

    {clear: both;}

    are used correctly in your css.

    0 讨论(0)
 看不清?
提交回复
热议问题