内边距与内部边框问题：内部边框未遵循外层内边距规则

你的核心问题出在CSS选择器错误和内边距的设置逻辑上，以下是具体的修正方案：

方案一：调整外层盒子内边距（推荐） #

直接给外层.plan设置左右内边距，让内部所有元素自然继承这个空间，同时修正.description的选择器：

.plan {
    display: block;
    margin: 20px 20%;
    width: auto;
    border: 2px solid;
    border-radius: 5px;
    padding: 0 10px; /* 给外层盒子设置左右内边距，内部元素自动在这个范围内排列 */
}

.plan * {
    text-decoration: none;
}

.plan .description { /* 修正选择器，匹配.plan下的所有.description后代元素 */
    border: 2px solid black;
    width: 100%; /* 让内部盒子占满外层内边距后的可用宽度 */
    box-sizing: border-box; /* 确保边框包含在宽度内，不会超出外层范围 */
}

方案二：保留后代元素padding的修正方式 #

如果一定要通过.plan *设置padding，需要抵消.description自身的padding影响，让边框对齐到外层的10px位置：

.plan {
    display: block;
    margin: 20px 20%;
    width: auto;
    border: 2px solid;
    border-radius: 5px;
}

.plan * {
    text-decoration: none;
    padding: 0 10px;
}

.plan .description {
    border: 2px solid black;
    padding: 0; /* 去掉自身的padding */
    margin: 0 -10px; /* 用负margin抵消父级的padding，让边框延伸到外层的10px位置 */
    box-sizing: border-box;
}

关键提示：

• .plan * .description是错误的选择器，它会匹配.plan后代元素的子元素里的.description，而非.plan直接或间接后代的.description
• box-sizing: border-box能避免边框和内边距导致元素宽度超出预期

内容的提问来源于stack exchange，提问作者haiku