html - How do I make space between <nav> and <section> -


i'm looking space between <nav> tag , <section> tag. @ minute in browser flush each other. want have space between them, i'm not sure how.

here simple code -

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 am</a> -             <a href="from.hmtl">where from</a> -             <a href="study.hmtl">what studying</a> -             <a href="more.html">race 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  }  {     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;  } 

simply add margin bottom of <nav> (or top of <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; /* line */     background-color: white;     width: 40%;     padding: 10px;     border: 2px solid black } 

demo

also can shorten different margin definitions by:

margin: 0 auto 30px; 

Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -