CSS如何为内容添加外边框和列分隔边框且不挤压内部内容

添加边框后容器缩小是因为默认CSS盒模型为content-box，边框宽度会占用元素设定宽高之外的额外空间，挤压原有布局。用以下方案即可实现需求：

实现步骤 #

• 全局设置box-sizing: border-box，让边框、内边距都计入元素本身的宽高，不会额外占用布局空间
• 给外层flex容器#sc1添加外边框和上下内边距，实现外部边框效果
• 给除第一个之外的列添加左侧边框作为纵向分隔线，同时给所有列加水平内边距，避免内容紧贴边框

完整修改后的CSS代码 #

/* 全局统一盒模型 */
* {
    box-sizing: border-box;
}
body, html{
    margin: 0;
}
#site-wrap{
    padding:25px 10px;
}
li{
    margin: 10px 0;
}
section.li{
    max-width: 175px; /* 比原数值多30px，抵消左右15px内边距，保证内容展示宽度和原来一致 */
    padding: 0 15px;
}
/* 给非首列添加左侧纵向分隔线 */
section.li:not(:first-child) {
    border-left: 1px solid #333; /* 可自行修改边框颜色、粗细 */
}
.stretch{
    height: 180px;
}
p{
    line-height: 1.5;
}
#sc1{
    display: flex;
    justify-content: space-evenly;
    border: 1px solid #333; /* 外边框，可自行调整样式 */
    padding: 10px 0; /* 上下内边距，让外边框和内容保持合理间距 */
}

效果说明 #

flex布局默认align-items: stretch属性会让所有列高度自动撑满容器高度，纵向分隔线会自动和上下外边框完美衔接，原有内容尺寸不会被挤压，不需要额外计算高度差值。

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