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

A lot of elements in CSS have default padding and margins set on them. So, when you start building a new site, it's always good to have a reset.css file ready. Add this to make to rub the default values, so you have more control over your web page.

/* 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;
}

I hope this helps all fellow developers this is something that bugged for me a while when I was learning.


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.


I had similar problem, got this resolved by the following CSS:

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

Is your first element h1 or similar? That element's margin-top could be causing what seems like a margin on body.

Tags:

Html

Css