Question

我正在尝试使用respsonsive设计构建HTML5页面，但请注意某些元素之间存在间距（请参阅JSFiddle：http://jsfiddle.net/LWQg2/）：

注意如何在internationalization和mymenu以及mainnav和sitesearch之间显示组织标题。我不知道如何删除这个空间。

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

Answer 1

这是因为ul元素的边缘。

使用ul { margin:0; }删除它或声明#mainnav, #mymenu { overflow: auto; }来修复它。

Answer 2

间距是由ul元素的默认顶部和底部边距引起的。

Answer 3

将您的保证金更改为0，您也可以将剩下的一切保留下来。

margin:0;
float:left;

您可以在浏览器中使用F12来帮助您识别此类问题。

html 5节元素之间的默认间距？

3 个答案: