Can't border the way I want because of padding

Question

Here's what's happening :

code :(Html)

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

code:(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;

}

I want this to be able to only border the words but to not have huge gaps. Here is a picture of what I want:

Answer 1

You need to use margin instead of padding and add overflow: hidden , so that your margins do not collapse:

 .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

我只需要将填充更改为边距即可实现..