CODEWITHSUNDEEP
htmlcssdoublemargin
Acla
Acla

Reputation: 141

css float gets double margin on top (not from body)

I'm new to css and I'm having a margin problem with a float element that gets a 20px margin on top, even though its margin is 10px. I've been looking at several topics, where body default margins seem to be the problem, but that's not it. Anyone knows why this double margin is showing up?

I think it's due to my div container on the side, because if I set its top margin to 0, then the floated element has a normal 10px top margin (not 20px). I just don't understand how the div can be affecting the floated element.

ps: I'm using firefox

double margin

html:

<body>
<nav>
    <ul>
        <li> <a href="">Home</a> </li>
        <li> <a href="">Products</a> </li>
        <li> <a href="">Plan B</a> </li>
    </ul>
</nav>
<div class="content">
    <h2> Products</h2>
    <ul>
        <li><a href="">Product category</a></li><!--
      --><li><a href="">Product category</a></li><!--
      --><li><a href="">Product category</a></li><!--
       --><li><a href="">Product category</a></li><!--
       --><li><a href="">Productcategory</a></li><!--
--></ul>
    <p>hello there!
       etc..</p>
</div>
</body>

css:

body {
    font-size: 14px;
    padding: 0;
    margin: 0;
    border; 0;
}

/* -------------- SIDEBAR ---------------- */

nav ul {
    float: left;
    display: inline-block;
    width: 180px;
    border: 0;
    margin: 0;
    padding: 0;
}

nav ul li {
    background-color: red;
    margin: 10px;               /* HERE */
    padding: 10px;
    list-style-type: none;
    text-align: center;
}

nav ul li a {
    color:black;
    padding: 0;
    bordeR; 0;
    text-decoration: none;
}



/* --------------CONTENT AREA---------------- */
div.content {
    background-color: blue;
    margin: 10px 10px 10px 180px;   /* if top margin set to 0, it works */
    padding: 0;
    overflow: hidden;
}

div.content h2 {
    font-size: 120%;
    padding: 0;
    margin: 5px;
    float: left;
}

div.content ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    float: right;
}

div.content ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
}


div.content ul li a {
    background-color: pink;
    text-decoration: none;
    padding: 5px;
    border-radius: 0;
    border: black;
    border-style: solid;
    border-width: 0;
}

div.content p {
    font-size: 110%;
    clear: both;
}

Thanks in advance!

Upvotes: 0

Views: 761

Answers (1)

I-am Sam
I-am Sam

Reputation: 268

you have a margin on all you li's ...do this:

nav ul li:first-child {
    margin-top: 0;
}

when you use :first-child you are telling that your first li margin-top is 0

Upvotes: 1

Related Questions