设置display:inline-block的div未对齐，修改单个div margin-top带动父容器移动

1. inline-block元素默认不对齐的原因 #

你遇到的对齐偏差是inline-block元素的默认垂直对齐规则导致的：

• inline-block元素的默认vertical-align属性值为baseline，即会和父元素的文本基线对齐
• 每个inline-block元素的基线是其内部最后一行行内内容的基线，你的两个盒子内部的文本高度、边距不一致，自然会出现错位，和宽度没有直接关联，所以调整宽度只能偶然得到近似对齐的效果。

2. 子元素加margin-top带动父容器移动的原因 #

这个是**外边距塌陷（外边距合并）**的典型表现：

• 当父元素<main>没有设置边框、内边距，也没有触发BFC（块级格式化上下文）时，子元素的margin-top会和父元素的margin-top发生合并，相当于这个margin值直接作用在父元素身上，所以整个main容器会跟着子元素的margin一起移动。

你可以按以下步骤修改代码彻底解决问题：

1. 统一两个inline-block元素的垂直对齐规则，给两个盒子都加上vertical-align: top;（也可以根据需求设置为middle/bottom实现不同对齐效果），即可实现精准对齐，无需调整宽度。
2. 解决外边距塌陷问题，任选以下一种方案即可：

• 给父元素<main>添加overflow: hidden;或者display: flow-root;，主动触发BFC，阻断外边距合并
• 给父元素<main>添加1px的padding-top或者border-top，物理阻断外边距合并
• 如果只需要微调单个inline-block元素的垂直位置，也可以放弃margin-top，改用transform: translateY(15px);实现偏移，不会触发外边距塌陷，也不会影响其他元素的布局。

调整后的CSS示例： #

main {
  /* 触发BFC解决外边距塌陷 */
  display: flow-root;
}
.box-1 {
  border: 3px solid red;
  border-radius: 3px;
  background-color: black;
  color: whitesmoke;
  width: 45%;
  border-width: 5px;
  height: 194px;
  display: inline-block;
  margin-right: 101px;
  /* 统一垂直对齐规则 */
  vertical-align: top;
}

.box-2 {
  display: inline-block;
  border: 2px solid plum;
  background-color: powderblue;
  color: black;
  border-width: 4px;
  border-radius: 14px;
  width: 33%;
  margin-top: 15px;
  margin-left: 62px;
  /* 统一垂直对齐规则 */
  vertical-align: top;
}

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