vw总和为100却换行，仅99.6vw正常，求原因及解决办法

• inline-block元素的空白间隙问题：你给main和aside设置了display: inline-block，HTML中这两个元素之间的换行、空格会被浏览器渲染成空白字符，占据额外宽度。你的元素宽度+margin总和是70vw+5vw+5vw+20vw=100vw，加上空白字符的宽度后总宽度就超过了视口宽度，因此触发换行。
• 不管用vw还是%单位，只要采用inline-block布局，这个空白间隙问题都会存在，所以换单位无法解决。

方法1：消除HTML中的空白字符 #

把main和aside的标签连在一起，或者用注释填充元素间的间隙：

<main>...</main><aside>...</aside>
<!-- 或者用注释消除间隙 -->
<main>...</main><!--
--><aside>...</aside>

方法2：父元素设置font-size: 0 #

给main和aside的父元素（比如body）设置font-size: 0，空白字符的宽度会被清零，之后在子元素里重新设置字体大小避免影响内部文本：

body {
  margin: 0;
  font-size: 0; /* 消除inline-block空白 */
}
main, aside {
  font-size: 16px; /* 恢复正常字体大小 */
}

方法3：使用Flexbox布局（推荐） #

抛弃inline-block，采用现代Flexbox布局，直接给父容器（比如body）设置display: flex，自动处理元素间的布局，不会产生空白间隙：

body {
  margin: 0;
  display: flex;
}
main {
  width: 70vw;
  margin: 0 5vw; /* 合并左右margin */
}
aside {
  width: 20vw;
}

Flexbox还能轻松实现对齐、响应式适配等需求，是更可靠的布局方案。

方法4：负margin（不推荐） #

给aside设置负的margin-left抵消空白宽度，但这个值是固定的，不同浏览器、字体下空白宽度可能有差异，兼容性较差：

aside {
  width: 20vw;
  display: inline-block;
  margin-left: -0.4vw;
}

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