Issue removing margin with HTML/CSS

问题

I cannot seem to succeed to completely fill a horizontal space with a div. There is always a little space at the right, left, top and bottom.

JSFiddle

I am currently using:

CSS:

.section{
   width: 100%;
   display: inline-block;
   top: 0px;
   left: 0px;
   margin: 0px;
   padding: 0px;    
}
#section-1,#section-3{
   background-color: #ddd;    
}

HTML:

<div id="section-1" class="section">
  <p>Foo</p>
</div>

回答1:

Also put margin: 0 on body

body{
    margin: 0;
}

What is generally done is setting margin and padding both to 0 on both html and body to make it work perfectly cross-browser.

html, body{
    padding: 0;
    margin: 0;
}

回答2:

That's actually because of the margin for the body. Please check this fiddle. I've added this style to the CSS:

body {
    margin: 0px;
}

来源：https://stackoverflow.com/questions/26208187/issue-removing-margin-with-html-css