Question

我希望在<nav>标记和<section>标记之间添加空格。在浏览器的那一刻，他们互相冲洗。我想在它们之间留一个空格，但我不确定如何。

这是我的简单代码 -

HTML

<!DOCTYPE hmtl>
<html>
<head>
    <meta charset="UTF-8">
    <title>About Me</title>
    <srcipt></srcipt>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<header>

<h1>About me</h1>

</header>

    <nav>
        <ul>
            <a href="index.hmtl">Who I Am</a> -
            <a href="from.hmtl">Where I am From</a> -
            <a href="study.hmtl">What I am Studying</a> -
            <a href="more.html">Race the Flux</a> -
            <a href="gear.html">My Gear</a>
        </ul>
    </nav>

    <section>
        <div id="first">
        <p>
        Nam egestas, nibh non efficitur luctus, nisi eros
        </p>

        <p>
        Nam egestas, nibh non efficitur luctus, nisi eros

        </p>
        <img src="images/Me.jpg">

        <p> 
        Nam egestas, nibh non efficitur luctus, nisi eros
       </p>
        </div>
    </section>

    <footer><a href="from.html">Next Page</a></footer>

</body>
</html>

CSS

body: lang(en) {
    margin-top: 2em;
}

body {

    text-align: center;
    padding: 0 20px;
    margin: 6em 3% 19em 3%;
    background: #F8F8F8  ;
    color: black;
    font: Arial;
    position: relative;

}

body{

    display: block;
}


#first {

    font-family: Tahoma, sans-serif;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffcc;
    width: 550px;
    padding: 10px;
    border: 2px solid black;
    box-shadow: 0 .3em 1em #000;
}

nav {

    box-shadow: 0 .1em 1em #000;
    font-family: Tahoma, sans-serif;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    width: 40%;
    padding: 10px;
    border: 2px solid black

}

a {
    color: black;
}

img {

    width: 500px;
    border: 2px solid black
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

footer {

    font-weight: bold;
    font-family: Tahoma, sans-serif;
    margin: 10;
    padding: 10;

}

Answer 1

只需在<nav>的底部（或<section>的顶部）添加一些边距：

nav {
    box-shadow: 0 .1em 1em #000;
    font-family: Tahoma, sans-serif;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px; /* this line */
    background-color: white;
    width: 40%;
    padding: 10px;
    border: 2px solid black
}

DEMO

您还可以通过以下方式缩短不同的margin定义：

margin: 0 auto 30px;

Answer 2

有几种方法可以做到这一点，具体取决于你想要它的外观，速度和功能。

只需在两者之间创建一个具有此样式的div：

#spacer {height:50px;}

或者在其间放置一个空白的png图像。

或者只是给导航一个下边距，或者给一个上边距。

如何在<nav>和<section>之间留出空间

2 个答案: