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

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

最简单的答案是你的填充将增加30px到它已经是的大小。由于你的li有一些内容（“一些东西”），因此这个内容已经是一定的宽度/高度所以你要添加30个像素。