Issue removing margin with HTML/CSS

Question

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>

It is the p tag of the browser causing this. jsfiddle.net/gpdeoL1v/6 Use a browser reset css instead for a cleaner fix. — karthikr
– karthikr, Commented Oct 5, 2014 at 23:16

nisargjhaveri · Accepted Answer · 2014-10-05 23:17:17Z

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

answered Oct 5, 2014 at 23:17

nisargjhaveri

1,50912 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fahad Hasan · Accepted Answer · 2014-10-05 23:15:14Z

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

answered Oct 5, 2014 at 23:15

Fahad Hasan

10.5k4 gold badges31 silver badges36 bronze badges

1 Comment

Slava Knyazev Over a year ago

Worked like a charm! I think I mistook what margins do. I thought that it controls the outer margin instead the inner margin.

Collectives™ on Stack Overflow

Issue removing margin with HTML/CSS

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related