CSS-无法将导航链接的位置正确定位，并且无法消除图像和主标题导航栏之间的附加边距

Question

So I just can't get rid of this little additional margin between image and navi bar. 因此，我只是无法摆脱图像和导航栏之间的少量额外余量。 Image has set to have 2% margin, but between image and navibar there´s more margin. 图片设置为具有2％的边距，但是在图片和导航栏之间有更多的边距。 And adding padding to the navi links as in this tutorial at 28.00 the guy sets margin: 0 auto; 如本教程中28.00所示，将填充添加到navi链接中，该家伙设置margin: 0 auto; to nav list. 导航列表。 That does not work for me. 那对我不起作用。 He uses nav with <ul> and <li> tags, I just used <nav></nav> tags and <a href="#">link</a> to create menu. 他使用带有<ul>和<li>标记的<nav></nav> ，而我只是使用<nav></nav>标记和<a href="#">link</a>创建菜单。 How to fix this margin error and move links up and down on menu bar? 如何解决此边距错误并在菜单栏上上下移动链接？

CSS 的CSS

body {
   background-image: url('lgrey.jpg');
   color: #000305;
   font-size: 90%; 
   font-family: Arial, Georgia, Verdana;
   line-height: 1.5;
   text-align: left;
}

.body {  
    margin: 0 auto;  
    width: 70%;
    clear: both;  
 }


.mainheader img {    
   width: 25%;
   height: auto;
   margin: 2% 0;
}

.mainheader nav {            
    background-color: dimgrey;
    height: 35px;
    border-radius: 4px;
   -moz-border-radius: 4px;   
   -webkit-border-radius: 4px; 
   margin: 0 auto;
 }

 .mainheader nav a {
    text-decoration: none;
    color: white;

   }

HTML 的HTML

 <!DOCTYPE html>
 <html>
 <head>
    <title>responsive</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >

    </head>

   <header class="mainheader">
      <img src="furnitur2.jpg">

  <nav id="nav1"> 
      <a href="#">Avaleht</a>
      <a href="#">Meist</a>
      <a href="#">Asukoht</a>
      <a href="#">Teenused</a>
      <a href="#">Galerii</a>
      <a href="#">Kontakt</a>

      </nav>
     </header>

  <div class="maincontent">
    <div class="content">
       <article class="topcontent">
          <header>
            <h2><a href="#" title="First post">First Post</a></h2>
      </header>

      <footer>
        <p class="post-info">Selle posti autor on Otto Oliver Olgo</p>
      </footer>

      <content>
        <p>Lorem ipsum</p>
        <p>Lorem ipsum</p>
        </content>

         </article>
     </div>
   </div>

         <aside class="topsidebar">
           <article>
             <h3>Ülemine sidebar</h3>
                <p>Lorem ipsum ja nii edasi ma ei maleta mis ladina keelsed                                            
                </p>
              </article>     
           </aside>

       <aside class="bottomsidebar">
         <article>
            <h3>Ülemine sidebar</h3>
                <p>Lorem ipsum ja nii edasi ma ei maleta mis ladina keelsed                                            
                </p>
              </article>     
           </aside>

 <footer>
   <p>Copyright &copy: 2015 5toneface. All Rights Reserved</p>
 </footer>

 </body>

 </html>

Answer 1

The image tag is displaying inline with the content which seems to leave extra space at the bottom of it for natural padding. image标签显示与内容内联的内容，该内容似乎在其底部留有多余的空间用于自然填充。

If your img tag is updated to display as a block element in the css the space goes away: 如果您的img标记已更新为在css中显示为块元素，则空格消失了：

.mainheader img {    
    width: 25%;
    margin: 2% 0 0;
    display: block;
 }

To adjust your links you could: 要调整链接，您可以：

.mainheader nav a {
    text-decoration: none;
    color: white;
    /* Set line-height to same as height will center text vertically */
    line-height: 35px; 
    /* inline block make the whole height clickable */
    display: inline-block;
    padding: 0 10px; 
}

CSS-无法将导航链接的位置正确定位，并且无法消除图像和主标题导航栏之间的附加边距

问题描述

1 个解决方案

解决方案1
0 2015-05-09 04:10:57

CSS-无法将导航链接的位置正确定位，并且无法消除图像和主标题导航栏之间的附加边距

问题描述

1 个解决方案

解决方案1 0 2015-05-09 04:10:57

解决方案1
0 2015-05-09 04:10:57