发表新帖
发表新帖

How to remove margin space around body or clear default css styles

后端 未结
关注
7 1395
夕颜
夕颜 2020-11-22 06:09

I am admittedly a beginner, but I also did a fair amount of searching before posting this. There seems to be extra space around my div element. I also would like to point ou

相关标签:
7条回答
  • 离开以前
    2020-11-22 06:21

    That's the default margin/padding of the body element.

    Some browsers have a default margin, some a default padding, and both are applied as a padding in the body element.

    Add this to your CSS:

    body { margin: 0; padding: 0; }
    0 讨论(0)
  • 灰色年华
    2020-11-22 06:22

    body has default margins: http://www.w3.org/TR/CSS2/sample.html 

    body { margin:0; } /* Remove body margins */

    Or you could use this useful Global reset 

    * { margin:0; padding:0; box-sizing:border-box; }

    If you want something less * global than:

    html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

    some other CSS Reset:

    http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css
    http://meyerweb.com/eric/tools/css/reset/
    https://github.com/necolas/normalize.css/
    http://html5doctor.com/html-5-reset-stylesheet/
    …

    0 讨论(0)
  • 无人共我
    2020-11-22 06:26

    I found this problem continued even when setting the BODY MARGIN to zero.

    However it turns out there is an easy fix. All you need to do is give your HEADER tag a 1px border, aswell as setting the BODY MARGIN to zero, as shown below.

    body { margin:0px; }

header { border:1px black solid; }

    If you have any H1, H2, tags within your HEADER you will also need to set the MARGIN for these tags to zero, this will get rid of any extra space which may show up.

    Not sure why this works, but I use Chrome browser. Obviously you can also change the colour of the border to match your header colour.

    0 讨论(0)
  • 盖世英雄少女心
    2020-11-22 06:30

    try removing the padding/margins from the body tag.

    body{
padding:0px;
margin:0px;
}
    0 讨论(0)
  • 夕颜
    2020-11-22 06:34

    try to ad the following in your CSS:

    body, html{
    padding:0;
    margin:0;
}
    0 讨论(0)
  • 感情败类
    2020-11-22 06:38

    I had the same problem and my first <p> element which was at the top of the page and also had a browser webkit default margin. This was pushing my entire div down which had the same effect you were talking about so watch out for any text-based elements that are at the very top of the page.

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Website</title>
  </head>
  <body style="margin:0;">
      <div id="image" style="background: url(pixabay-cleaning-kids-720.jpg) 
no-repeat; width: 100%; background-size: 100%;height:100vh">
<p>Text in Paragraph</p>
      </div>
    </div>
  </body>
</html>

    So just remember to check all child elements not only the html and body tags.

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