如何修复CSS使width包含padding和border？侧边栏与文章宽度适配问题

核心问题分析 #

你遇到的问题是**box-sizing: border-box仅给部分元素设置，未全局生效**，且侧边栏和文章区的margin、padding未纳入宽度计算，导致总宽度超过100%无法并排；另外footer的width:100%搭配margin会导致内容溢出页面。

具体修改方案 #

以下是调整后的CSS代码，关键改动已标注：

/* 全局设置box-sizing，让所有元素的padding/border都包含在宽度内，同时清除默认边距 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

ul{
    background-color: #fdf6e3;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    margin: 0px;
}
article {
    float: left;
    /* 80%宽度减去自身左右margin总和(10px*2)，padding已被box-sizing包含 */
    width: calc(80% - 20px);
    padding: 5px;
    margin: 10px;
    background-color: #fdf6e3;
    border-radius: 5px;
}
footer {
    margin: 10px;
    background-color: #fdf6e3;
    border-radius: 5px;
    clear: left;
    /* 去掉width:100%，块级元素默认宽度为100%，避免margin导致溢出 */
}
a{
    color: #dc322f;
    padding-left: 5px;
    padding-right: 5px;
}
body{
    background-color: #eee8d5;
    color: #002b36;
    font-family: 'Times New Roman', 'Courier New', monospace;
    /* 添加左右padding，避免内容贴页面边缘 */
    padding: 0 10px;
}
u{
    color: #d33682;
}
i {
    color: #d33682;
}

.icon {
    width: 48px;    
    margin-top: 10px;
    border-radius: 8px;
}
.sidebar {
    float: left;
    /* 20%宽度减去自身左右margin总和(10px*2) */
    width: calc(20% - 20px);
    background-color: #fdf6e3;
    margin: 10px; /* 统一上下左右margin，和article对齐 */
    border-radius: 5px;
    padding: 5px; /* 添加padding，和article内容缩进一致 */
}
.footersection {
    float:left;
}
.footerbackground {
    background-color: #fdf6e3;
    border-radius: 5px;
    width: 100%;
}

关键改动说明 #

1. 全局box-sizing设置：确保所有元素的宽度计算包含padding和border，从根源避免宽度溢出问题，同时清除浏览器默认边距，减少布局干扰。
2. 宽度计算修正：侧边栏和文章区的宽度都用calc减去自身左右margin的总和，确保两者总宽度（含间距）刚好适配页面100%宽度。
3. 统一间距样式：给侧边栏添加和文章区一致的margin、padding，让视觉对齐更美观。
4. footer优化：去掉多余的width:100%，避免margin导致内容溢出。
5. body边缘padding：防止侧边栏和文章区贴紧页面边缘，和其他模块的间距保持统一。

修改后侧边栏与文章区即可完美并排，且和页面其他元素对齐效果一致。

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