为何布局中部分元素位置偏移？div元素定位异常求助

你遇到的是inline-block元素默认基线对齐导致的布局错位，并非margin随机变化。因为每个div内部内容高度不一致，浏览器会自动将它们的基线对齐，进而出现部分div位置偏低、甚至重叠的视觉效果。

快速修复方案 #

给你的inline-block元素添加vertical-align: top，强制所有元素以顶部对齐：

border-style: solid;
border-width: 1vh;
width: 30vw;
height: 30vh;
margin: 2vh;
padding: 1vh;
border-radius: 2vh;
display: inline-block;
/* 新增这行代码 */
vertical-align: top;
background: #e3e3e3;
border-color: #3eabfe;
font-family: "Quicksand", sans-serif;
text-align: center;
box-sizing: border-box;

额外优化：消除inline-block间隙 #

如果发现元素之间存在莫名的小间隙，是因为HTML中div之间的换行/空格被解析成了空白字符，可任选一种方法解决：

• 给包裹所有div的父容器设置font-size: 0，子元素再恢复所需字体大小：

  .post-wrapper { /* 替换成你实际的父容器类名 */
    font-size: 0;
  }
  .post {
    font-size: 16px; /* 恢复你需要的字体尺寸 */
  }
  

• 去掉HTML中div之间的换行和空格：

  <div class="post">...</div><div class="post">...</div><div class="post">...</div>
  

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