Html 列表项上的填充将扩展到列表之外

如果将

放在

元素内并给

填充，则

元素将展开以容纳整个段落元素及其填充。太棒了

如果在

中包含的
上添加了填充，则
元素不会展开以使
与填充匹配。相反，它允许填充物延伸到“盒子”之外。到底发生了什么事

请尝试一下下面的页面，看看我的意思。
的填充在30px处被夸大，以清楚地作为示例


正文{
字体大小：小；
字体系列：Verdana；
背景色：#D9D9D9；
边际：0px；
}
标题{
背景色：#878CA1；
利润率：10px；
}
导航{
背景色：#878CA1；
利润率：10px；
}
导航ul{
列表样式类型：无；
边际：0px；
填充：0px；
}
李国荣{
填充：30px；
显示：内联；
背景色：#D9D9D9；
}
标题h2#标语{
浮动：对；
}
第#节主要内容{
背景色：黑色；
利润率：10px；
填充物：5px；
}
#主p{
背景色：白色；
边际：0px；
填充：30px；
}

蒸汽产品和配件










试验

如果希望父元素的尺寸符合填充，请将子
li
元素的
显示从
inline
更改为
inline block


谢谢,谢谢,谢谢。我开始认为我对CSS“盒子模型”的整个概念是错误的。
nav ul li {
    padding: 30px;
    display: inline-block;
    background-color: #D9D9D9;
}