CODEWITHSUNDEEP
csscss-float
Dima Kononenko
Dima Kononenko

Reputation: 17

Unexpected 10px margin when using float in css

I faced with issue using property "float" in CSS. On the top of the page occurs 10px margin. How to fix it?

PS.Adding empty div to parent div with id="background1" doesn't work Also I read this article https://css-tricks.com/all-about-floats/ but don't get how to apply those Techniques for Clearing Floats

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
#background1 {
    background: #F6F7FB;
    width: 100%;
    height: 527px;
    padding:0;
    position: relative;
}

/*Header menu*/

#background1 li {
    list-style-type: none;
    display:inline;
}
#background1 li a {
    font-family: HalisGR-Medium;
    font-size: 20px;
    color: #3B3B3B;
    text-decoration: none;
    float: right;
    margin-left: 52px;
    margin-top: 24px;
}
#navmenu {
    margin-right: 72px;
}
/*Header menu ends*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!--Header menu-->
    <div id="background1" style="clear: both">
       <div style="clear: both;"></div>
           <section id="navmenu">
               <ul>
                   <li><a href="#">Projects</a></li>
                   <li><a href="#">Bio</a></li>
                   <li><a href="#">Contact</a></li>
               </ul>
           </section>
    </div>
    
</body>
</html>

Upvotes: 1

Views: 140

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

It isn't because of the floated children. Just apply margin:0; to the ul. The margin-top is what's collapsing and showing outside of the parent.

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
#background1 {
    background: #F6F7FB;
    width: 100%;
    height: 527px;
    padding:0;
    position: relative;
}

/*Header menu*/

#background1 li {
    list-style-type: none;
    display:inline;
}
#background1 li a {
    font-family: HalisGR-Medium;
    font-size: 20px;
    color: #3B3B3B;
    text-decoration: none;
    float: right;
    margin-left: 52px;
    margin-top: 24px;
}
#navmenu {
    margin-right: 72px;
}
#navmenu ul {
  margin: 0;
}
/*Header menu ends*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!--Header menu-->
    <div id="background1" style="clear: both">
       <div style="clear: both;"></div>
           <section id="navmenu">
               <ul>
                   <li><a href="#">Projects</a></li>
                   <li><a href="#">Bio</a></li>
                   <li><a href="#">Contact</a></li>
               </ul>
           </section>
    </div>
    
</body>
</html>

Upvotes: 1

Related Questions