<分区>
<分区>
我不明白为什么底部边距不适用于菜单栏。我尝试了所有类型的填充、边距和一切。我不知道要添加或更改什么才能应用到它。我试图将相对于 #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> </p>
<p> </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%;
}
最佳答案
Top 和 bottom padding/margin 对 inline 元素没有影响.
这是一个很好的article这解释了这一点。
因此，适合您的解决方案可能如下所示:
.menu{
display: inline-block;
font-family: "Myriad Pro";
font-size: 20px;
color: #333333;
margin: 40px;
bottom: 20px;
}
关于html 和 css 底部边距不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23343596/