が原因でパディング

Question

の私が望むように接することができませんここで何が起こっているのかです：

コード：（HTML）

<ul class="menu" style=" 
    margin-top: 0px; 
    margin-bottom: 0px;"> 
    <li>Home</li> 
    <li>News</li> 
    <li>Contact</li> 
    <li>About</li> 
</ul> 

コード：（CSS）

.menu { 

list-style-type: none; 

background-color: #B7FFED; 

font-size: 70px; 

display: inline-block; 

font-family: 'Lilita One', cursive; 

padding: 0px; 

height: 1000px; 

} 



.menu li{ 

padding-bottom: 100px;  
padding-top: 10px; 
border: 2px solid; 

} 

私はこれをしたいです言葉に限ることができるが、大きなギャップを持たないこと。ここで私は何をしたいの絵です：

Answer 1

あなたはmarginの代わりpaddingを使用して、余白が崩壊しないように、overflow: hiddenを追加する必要があります。

.menu { 
 
    list-style-type: none; 
 
    background-color: #B7FFED; 
 
    font-size: 70px; 
 
    display: inline-block; 
 
    font-family: 'Lilita One', cursive; 
 
    padding: 0px; 
 
    height: 1000px; 
 
    overflow: hidden; 
 
    margin: 0; 
 
} 
 

 
.menu li { 
 
    margin-bottom: 100px; 
 
    margin-top: 10px; 
 
    border: 2px solid; 
 
}

<ul class="menu"> 
 
    <li>Home</li> 
 
    <li>News</li> 
 
    <li>Contact</li> 
 
    <li>About</li> 
 
</ul>

Answer 2

私だけしていましたパディングをマージンに変更してそれが起こるようにします。