填充不正常，给出了错误的形状

Question

有人可以解释为什么我的填充没有按预期运行吗？我的填充应该是一个完美的盒子，但由于某种原因，它变成了一些长方形。沿边一直填充 30 应该是一个完美的正方形。我的其他 li 和 ul 有更多规则，但这仅适用于我的“#nav”ID，所以我不明白为什么会有任何冲突。

html {
 height: 100%;
}

body{
 height: 100%;
 margin:0;
 font-family: courier;
 font-size: 22px;
 color: white;
}






#wrapper{
 position: relative;
 margin-left: auto;
 margin-right: auto;
 width: 85%;
 min-height: 100%;
 margin-top: -130px;
}



#inner{
 margin-top: 130px;
 width: auto;
}







/*
#wrapper{
    margin-left: auto;
    margin-right: auto;
    border: 1px solid blue;
    width: 85%;
    background-color: blue;
    height: calc(100vh - 130px);
}

*/



#footer, #wrapper:after{
 height: 130px;
}


.wrap {
 margin: 0 auto;
 width: 100%;
 display: flex;
 align-items: center;
 flex-wrap: nowrap;
}

.sub {
 padding: 12px;
 width: 32%;
 height: 100px;
 color: white;
 border-right: solid white 1px;
}

.sub:last-child{
 border: 0px;
}


#nav {
 list-style: none;
 font-weight: bold;
 width: 100%;
 text-align: center;
 background-color: #862d59;
 height: 100px;
 box-shadow: 0px 5px 8px grey;
}

#nav ul {
 list-style-type: none;
 margin: 0px;
 padding: 0; 
 overflow: auto;
//  background-color: #862d59;
}

#nav li {
 margin: 0px;
 display: inline-block;
}

#nav li a {
 padding: 10px;
 display: inline-block;
 text-decoration: none;
 font-weight: bold;
 font-size: 30px;
 color: white;
// background-color: #862d59;
}

#nav li a:hover {
color:  white;
text-shadow: 2px 2px 4px white;
}

#footer {
 display: flex;
 height: 130px;
 width: 100%;
 background-color: #862d59;
 clear: both;
}


li.middle{
 background-color: #26004d;
 padding: 10px 10px 10px 10px;
 margin-right: 30px;
 margin-top: 200px;
 text-align: center;
 color: white;
}

<div id="wrapper">

 <div id="inner">
  <ul>

   <li class="middle">some stuff</li>

  </ul>

 </div>





 </div>



 <div id="footer">

  <div class="wrap">

   <div class="sub"></div>
   <div class="sub"></div>
   <div class="sub"></div>

  </div>




 </div>

Answer 1

最简单的答案是您的内边距会在现有大小的基础上增加 30 像素。因为你的 li 有一些内容（"some stuff"），由于这个内容它已经是一定的 width/height 所以你将添加 30 像素。

填充不正常，给出了错误的形状

Padding not acting as it should, gives the wrong shape

html

css

console

padding