Question

我无法理解为什么底部边距不适用于菜单栏。我尝试了所有类型的填充，边距和一切。我不知道要添加或更改的内容，以便它可以应用于它。我试图将相对于#header和绝对的位置放到.menu，然后全部破坏。我不知道我做错了什么？

我的HTML：

<body>
<div id="wrapper">
<div id="header">
<div id="header_left"></div>
<div id="header_right">
  <div class="menu">Naslovna</div>
  <div class="menu">PVC stolarija</div>
  <div class="menu">ALU stolarija</div>
  <div class="menu">Ostali proizvodi</div>
  <div class="menu">Reference</div>
  <div class="menu">Kontakt</div>

  </div>
  </div>
  <div id="header_line"></div>
  <div id="content">
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  </div>
  <div id="footer_line"></div>
  <div id="footer"></div>
  </div>


 </body>
 </html>

我的CSS：

  @charset "utf-8";
 /* CSS Document */

  body{
background:#FFF;
margin:0;
padding:0;
  }

  #wrapper{
backgorund:#FFF;
width:100%;
height:100%;
}

  #header{
background-image:url(struktura/header_bckg.png);
background-repeat:repeat-x;
height:140px;
width:100%;


  }

 #header_left{
width:40%;
height:100%;
display:inline;
  }

 #header_left img{
margin: 10px 0 0 20px;
  }

#header_right{
width:55%;

display:inline;

    }

 .menu{
width: 100%;
display: inline;
font-family: "Myriad Pro";
font-size: 20px;
color: #333333;
margin: 0 0 0 40px;
bottom:20px;

}



 #header_line{
background-image:url(struktura/header_line.png);
background-repeat:repeat-x;
height:5px;
width:100%;
  }

 #content{
background: #FFF;
width: 100%;
height: 600px;


  }

 #footer_line{
background-image:url(struktura/footer_line.png);
background-repeat:repeat-x;
height:5px;
width:100%;
  }

 #footer{
background-image:url(struktura/footer_bck.png);
background-repeat:repeat-x;
height:250px;
width:100%;
   }

Answer 1

热门和底部填充 / 保证金对内嵌元素没有影响

这是一个很好的article来解释这一点。

因此，您的解决方案可能如下：

.menu{
    display: inline-block;
    font-family: "Myriad Pro";
    font-size: 20px;
    color: #333333;
    margin: 40px;
    bottom: 20px;
}

html和css底部边距不起作用

1 个答案: