How to remove this margin??

Discussion in 'HTML & Website Design' started by Igozorus, Jul 17, 2013.

0
  1. #1
    Hello.So i have a website.Here is the whole code

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>My site</title>
    <link href="styles.css" type="text/css" rel="stylesheet" media="screen">
    </head>

    <body>
    <div id="wrapper">
    <img src="images/0_3e126_5f08e893_L.jpg" />

    <ul>
    <li><a href="index.html">One</a></li>
    <li><a href="stihi.html">Two</a></li>
    </ul>

    <h1>Headings</h1>
    <p>Paagraphs</p>

    <div id="footer">
    <p>2013</p>
    </div>
    </div>
    </body>
    </html>

    So,wrapper contains all content and it is centered on the page .But there is a problem.Outside of wrapper from the top and the bottom there is a margin.I don't want it.Who knows,how can i remove it?I know i can do negative margin,but is it really a good way?

    Also,here is css
    #wrapper { margin:0px auto;
    width:500px;
    background-color:#F4F4F4; }

    ul { background-color:#0F9; }
    li { display:inline;
    margin-right:30px; }

    ul li a { font-size:20px;
    text-decoration:none; }

    a:link { color:#55002B; }
    a:hover { color:#639; }

    h1 { color:#0f9;
    text-align:center;
    font-size:40px; }

    p { color:#BB005E;
    font-size:17px; }

    #footer { border-top:solid #000 2px; }
    #footer p { text-align:center; }
     
    Solved! View solution.
    Igozorus, Jul 17, 2013 IP
  2. MaxTitan

    MaxTitan Member

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #2
    maybe

    display:block;
    position:fixed;
    top:0;
     
    MaxTitan, Jul 17, 2013 IP
  3. Igozorus

    Igozorus Greenhorn

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #3
    If i do that,whole wrapper moves to the lleft.It is not centered anymore
     
    Igozorus, Jul 17, 2013 IP
  4. #4
    It's caused by the browser's default styles. You need to override those styles. Set
    body { margin: 0px; }
    That should do it. All care!
     
    laylajune, Jul 17, 2013 IP
  5. Igozorus

    Igozorus Greenhorn

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    6
    #5
    Thank you.That is too easy :)
     
    Igozorus, Jul 20, 2013 IP
  6. maisamjohnm

    maisamjohnm Greenhorn

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #6
    laylajune answers you very nicely but there is an other solution
    *{margin:0; padding:0;}
    use this code in your css
    by using this code you will never get any extra margin or padding
     
    maisamjohnm, Jul 23, 2013 IP
  7. iamalive

    iamalive Well-Known Member

    Messages:
    794
    Likes Received:
    87
    Best Answers:
    0
    Trophy Points:
    145
    #7
    It is very easy to remove extra margin in your body by following this CSS code for body.
    body {margin:0px;} or
    *{margin:0px;}
     
    iamalive, Jul 25, 2013 IP
  8. freelancewebaz

    freelancewebaz Well-Known Member

    Messages:
    976
    Likes Received:
    23
    Best Answers:
    1
    Trophy Points:
    145
    #8
    Use a basic reset. Also, next time you have a CSS-related question you should probably put your sample code into something like jsfiddle so that it's easier for people to help you. The more you do to make answering your questions easy the more likely you are to get quality responses quickly.
     
    freelancewebaz, Jul 25, 2013 IP
  9. neilbruce

    neilbruce Greenhorn

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #9
    Best option for remove margin update this code.
    body {margin:0px;} or
    *{margin:0px;}
     
    neilbruce, Jul 25, 2013 IP