Default spacing between html 5 section elements?

StackOverflow https://stackoverflow.com/questions/21649103

Question

I'm trying to build a HTML5 page with respsonsive design, but notice there is spacing between some elements (see JSFiddle here: http://jsfiddle.net/LWQg2/):

Notice how the organge header are is displayed between some elements internationalization and mymenu, also between mainnav and sitesearch. I don't know how to remove this space.

<!DOCTYPE html>

<html class="no-js grid"> 


<head>
<meta charset="utf-8">

<title>TT-Design</title>

<link rel="stylesheet" href="css/global.css" media="all">
<link rel="stylesheet" href="css/layout.css" media="all and (min-width: 36.236em)">

<!-- These styles are for presentation only -->
<link rel="stylesheet" href="css/presentation-global.css" media="all">
<link rel="stylesheet" href="css/presentation-layout.css" media="all and (min-width: 36.236em)">    


<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 


  <link rel="stylesheet" type="text/css" href="/css/style.css?v=1" />

</head>

<body>
    <header>
        <section id="social">
            FB+Social
        </section>
        <section id="internationalization">
            lang/curr
        </section>
        <section id="mymenu">
            <ul>
                <li>login</li>
                <li>myaccount</li>
            </ul>
        </section>
        <img src="/images/logo.png" />
        <section id="bc_dialog">

        </section>
        <nav id="mainnav">
            <ul>
                <li>Home</li>
                <li>Directory</li>
                <li>Shop</li>
            </ul>
        </nav>
        <section id="sitesearch">
            Searchbox
        </section>
    </header>

    <div id="container">

        <header>
            <h1>Pagetitle</h1>
        </header> 

        <!-- page specific content -->

        <aside id="facets">
            facet navigation
        </aside>
        <aside id="leftside">
            left side menu
        </aside>
        <div id="pagecontent">
            <p>
                some regular content on the page. This is not a newsarticle page.
            </p>
        </div>
        <aside id="rightside">
            related content
        </aside>


        <!-- end of page specific content -->

    </div><!--! end of #container -->

    <footer id="sitefooter">
        Advertise | Contact | About
    </footer>

    <section id="sitemap">
        sitemap links
    </section>

</body>
</html>



body {
    margin:2px;
}

body header{
    background-color:orange;
}

#social{
    background-color:blue;
}

#internationalization{
    background-color:yellow;
}

#mymenu{
    background-color:grey;
    padding:0px;
}

#bc_dialog{

}

#mainnav{
    background-color:#FF00DC;
}

#sitesearch{
    background-color:#CDCDCD;
}

#container{
    background-color:#FFF;
}


#container header{
    background-color:#FFB7BF;
}

#container header h1{
    margin:0px;
}

#facets{
    background-color:purple;
}

#pagecontent{
    background-color:#FFD7AD;
}
#leftside{
    background-color:#FF0C00;
}
#rightside{
    background-color:#60FFEF;
}


#sitefooter{
    background-color:#BCE0FF;
}

#sitemap{
    background-color:#C5AAFF;
}
Was it helpful?

Solution

It is because of marging of ul elements.

Remove it with ul { margin:0; } or declare #mainnav, #mymenu { overflow: auto; } to fix it.

OTHER TIPS

The spacing is caused by the default top and bottom margins of ul elements.

Change your margin to 0 and you may also float everything left.

margin:0;
float:left;

You can use the F12 in your browser to help you identify such problems.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top