由于填充，无法按照我想要的方式进行边框处理

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

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