How to remove top margin from a website with nested containers?

Question

For some reason User Agent overrides my css, and puts a margin on top of a website i'm creating. I've searched stackoverflow for answers, but none seem to solve my problem.

Here's an example:

HTML:

<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="site-wrapper">
    <div class="menu">
        <div class="nav">
            <ul>
                <li><a href="#">EXAMPLE</a></li>
                <li ><a href="/spots">EXAMPLE</a></li>

                    <li ><a data-method="delete" href="/users/sign_out" rel="nofollow">EXAMPLE</a></li>
            </ul>
        </div>      
    </div>  
        <div class="content">
            <p id="notice"></p>

<div class="container">

</div>
        </div>
    </div>
</body>
</html>

CSS:

html,
body {
  height:100%;
  width:100%;
  margin: 0px;
  display: block;
}

.site-wrapper {
    display: block;
    background-color: yellow;
    width: 100%;
    height: 100%;
}

.nav {
    background-color: red;
}

.content {
    background-color: blue;
    width: 300px;
    height: 300px;
}

.menu {
    font-weight: 400;
    top:50%;
    margin-top:-115px;
    position:absolute;
width:100%;
text-align: center;
font-size: 12px;
letter-spacing: .75;
}


ul {
list-style: none;
line-height: 40px;
padding: 0px;
display: block;
}

http://plnkr.co/edit/8IO5ux16x40UhKeSDJvN?p=preview

score 0 · Accepted Answer · answered Aug 26 '14 at 16:54

0

Paragraphs have a default margin. Eliminate it:

p {
    margin:0;
}

jsFiddle example

answered Aug 26 '14 at 16:54

j08691

204,283
31
260
272

score 0 · Answer 2 · edited May 23 '17 at 12:27

The problem is caused by margin collapsing - parent elements don't have margin (or padding) so paragraph's margin is used.

You could either remove margin from the paragraph as suggested by j08691 or you can prevent margin collapsing by adding styling to parent containers - see this question: How to disable margin-collapsing?

For example this will help:

.content {
    display: inline-block;
}

score 0 · Answer 3 · answered Aug 26 '14 at 17:04

0

You can use this code to set margin for all elements

 *{
  margin:0;
  padding:0;
 }

answered Aug 26 '14 at 17:04

RN Kushwaha

2,081
3
29
40

How to remove top margin from a website with nested containers?

3 Answers3