html - 由于填充，无法按照我想要的方式设置边界

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>