CSS浮动布局中main部分边框紧贴aside部分无留白间距问题咨询

该现象是默认CSS盒模型计算规则和外边距设置匹配问题共同导致的，具体逻辑如下：

• CSS默认的盒模型为box-sizing: content-box，也就是说给元素设置的width属性仅指代内容区域的宽度，padding、border都会额外叠加到元素的总宽度上。
  你的aside设置了width:25%，同时加了左右各10px的padding，这就导致aside实际占据的水平总宽度为25%父容器宽度 + 20px，比你预想的25%要宽。
• main设置的margin-left:25%仅留出了25%父容器宽度的左侧空间，不足以放下总宽度超过25%的aside，aside的右侧区域会直接延伸到main的左外边距范围内，最终就出现了main的边框紧贴aside、没有留白的效果。

你可以根据需求选择任意一种方案调整：

1. 统一修改盒模型为border-box，让宽度设置包含padding和border，再额外留出间距：

/* 全局修改盒模型属于前端项目通用优化配置，建议所有项目都加上 */
* {
  box-sizing: border-box;
}
aside {
  float: left;
  width: 25%;
  padding: 10px;
  margin-right: 1%; /* 额外加右边距生成留白 */
}
main {
  border: 3px solid gray;
  padding: 10px;
  margin-left: 26%; /* 外边距匹配aside总宽度+间距 */
}

2. 不修改盒模型的话，直接调整main的左外边距数值，留出足够空间即可：

main {
  border: 3px solid gray;
  padding: 10px;
  /* 计算逻辑：25%基础宽度 + 20px的aside左右padding + 10px自定义间距 */
  margin-left: calc(25% + 30px);
}

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