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

【问题标题】：Default spacing between html 5 section elements?html 5节元素之间的默认间距？
【发布时间】：2014-02-08 17:11:06
【问题描述】：

我正在尝试使用响应式设计构建 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;
}

【问题讨论】：

标签： css html margin spacing sections

【解决方案1】：

这是因为 ul 元素的边距。

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

【讨论】：

【解决方案2】：

间距是由ul元素的默认上下边距引起的。

【讨论】：

【解决方案3】：

将你的边距更改为 0，你也可以浮动所有剩下的东西。

margin:0;
float:left;

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

【讨论】：