为什么边距不正常？

Question

我想实现这个目标： 我做到了这个：

为什么＃members-content-box上的边距设置不正常？该页面位于http://goo.gl/e7yiAf

<section id="members-content">
<div id="members-menu">
<ul>
<li><a href="members-my-items.html">My Items</a></li>
<li><a href="members-submit-items.html">Submit Items</a></li>
<li><a href="members-accounts-settings.html">Account Settings</a></li>
</ul>
<div id="menu-line">
</div>
</div>
<div id="members-content-box">
hello
<br /><br /><br />
</div>
</section>

我的CSS：

/* members menu*/
#members-content { width: 100%; margin: 0 auto;}
#members-menu { width: 100%; text-align: left; margin-bottom: 30px;}
#members-menu ul { list-style: none;}
#members-menu li { background-color: #FFF; width: 127px; height: 25px; text-align: center; float: left; margin-right: 7px; padding-top: 8px}
#members-menu li a { font-family: Verdana, Geneva, sans-serif; font-size: 12px; font-weight: normal; color: #2e2e2e; text-decoration: none;}
#members-menu li a:hover { color: #ffbe00;}
#members-menu li a:active { color: #ffbe00;}
#menu-line { height: 5px; background-color: #FFF; float:left; min-width: 100%; margin-left:0 40px 0 40px;}
/* members-content-box */
#members-content-box { background-color:#FFF; padding: 35px; float: left; width:100%; border: 1px solid grey;}

Answer 1

使用边距而不是填充 - 填充只会从内部扩大div，包括其背景

#members-content-box { background-color:#FFF; margin: 35px; float: left; width:100%; border: 1px solid grey;}

Answer 2

要实现上述目标，请将padding-bottom members-menu ul

#members-menu{
padding-bottom:30px;
}

并像这样更改members-content-box css

#members-content-box {
background-color: #FFF;
padding: 35px;
float: left;
width: 90%;
border: 1px solid grey;
margin-left:30px;
}

我认为这对你有帮助。