0

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>
lxg
  • 12,375
  • 12
  • 51
  • 73
Slava Knyazev
  • 5,377
  • 1
  • 22
  • 43
  • It is the `p` tag of the browser causing this. http://jsfiddle.net/gpdeoL1v/6/ Use a browser reset css instead for a cleaner fix. – karthikr Oct 05 '14 at 23:16

2 Answers2

0

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;
}
Fahad Hasan
  • 10,231
  • 4
  • 29
  • 36
  • Worked like a charm! I think I mistook what margins do. I thought that it controls the outer margin instead the inner margin. – Slava Knyazev Oct 05 '14 at 23:17
0

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;
}
nisargjhaveri
  • 1,469
  • 11
  • 21