HTML中article元素padding不生效及同级div垂直对齐问题

成因 #

核心原因是.project-n使用了float: left属性，浮动元素会脱离正常文档流，而作为父容器的article.project-elem没有做清除浮动处理，也没有触发块级格式化上下文（BFC），导致父容器无法正确包裹内部浮动元素，你设置的上下padding、固定高度都无法按照预期生效，相邻article的内容会发生重叠，最终所有article的黄绿色背景连成整块，外层的紫色背景无法在项目块之间透出。

另外你现有HTML中<div class="projects" id=#projects>的id属性写法不规范，建议改成<div class="projects" id="projects">，避免后续锚点或者JS选择器出错。

修复方案 #

方案1：兼容旧版浏览器的浮动修复 #

给.project-elem添加清除浮动规则，同时设置下间距透出外层紫色背景：

/* 新增清除浮动规则 */
.project-elem::after {
  content: "";
  display: table;
  clear: both;
}
.project-elem {
  background-color: greenyellow;
  padding-top: 5rem;
  padding-bottom: 5rem;
  height: 300px;
  margin-bottom: 1rem; /* 可自定义数值，就是项目块之间的紫色间距 */
}

方案2（更推荐，可同时解决垂直对齐问题）：改用Flex布局规避浮动问题 #

完全放弃浮动布局，用Flex实现内部元素排列，从根源避免浮动塌陷问题：

.project-elem {
  background-color: greenyellow;
  padding-top: 5rem;
  padding-bottom: 5rem;
  height: 300px;
  margin-bottom: 1rem; /* 项目块之间的紫色间距 */
  /* 新增flex配置 */
  display: flex;
  gap: 0;
}
.project-n {
  background-color: green;
  text-align: center;
  width: 60%;
  padding: 2.5rem;
  float: none; /* 删掉原有float属性 */
}
.img {
  background-color: blue;
  text-align: center;
  padding: 3rem;
  margin-left: 0; /* 删掉原有margin-left属性 */
  flex: 1; /* 自动占满剩余宽度 */
}

如果使用上面推荐的Flex布局方案，只需要给.project-elem新增一行对齐规则即可：

.project-elem {
  display: flex;
  align-items: center; /* 实现子元素垂直居中对齐 */
  /* 其他原有属性保持不变 */
}

如果坚持使用浮动布局，可以改用inline-block+vertical-align实现：

.project-n {
  display: inline-block;
  vertical-align: middle;
  width: 60%;
  float: none; /* 删掉原有float属性 */
  box-sizing: border-box; /* 避免padding把宽度撑超出容器 */
}
.img {
  display: inline-block;
  vertical-align: middle;
  width: 40%;
  margin-left: 0; /* 删掉原有margin-left属性 */
  box-sizing: border-box;
}

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