为何这段简单的CSS代码无法实现两张图片并排效果？

嘿，我来帮你搞定这个问题～你设置了display: inline-block却没达到并排效果，大概率是遇到了inline-block元素的空白符陷阱，另外也可以换更省心的现代布局方案，具体来看：

原因分析：空白字符占据额外宽度 #

当你用inline-block时，HTML里两个<img>之间的换行、空格都会被浏览器解析成空白字符，这些字符会占据一定宽度。咱们算一下：你的每张图宽30vw，左右margin各10vw，两张图加起来是30*2 + 10*2 = 80vw，看起来剩20vw空间，但加上空白符的宽度，总宽度就会超过100vw，浏览器就会把第二张图挤到下一行。

解决方案1：消除空白符影响 #

方法A：去掉HTML里的空白 #

把两张img的代码写在同一行，或者用注释消除换行：

<body>
  <div>
    <img src="图片地址1"><img src="图片地址2">
    <!-- 或者这样：<img src="图片地址1"><!-- --><img src="图片地址2"> -->
  </div>
</body>

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

空白符的大小由父元素的字体大小决定，把父div的font-size设为0，空白符就不会占空间了：

body {
  padding: 0;
  margin: 0;
}
div { /* 或者给div加个类名更规范 */
  font-size: 0;
}
img {
  display: inline-block;
  width: 30vw;
  margin-left: 10vw;
  margin-right: 10vw;
}

解决方案2：用Flex布局（更推荐） #

相比inline-block，Flex布局完全不用操心空白符的问题，实现起来更简单稳定：

body {
  padding: 0;
  margin: 0;
}
div {
  display: flex;
  /* 如果想保留你原来的margin设置，这行可以不用：justify-content: space-between; */
}
img {
  width: 30vw;
  margin-left: 10vw;
  margin-right: 10vw;
}

这样不管HTML里有没有换行空格，两张图都会乖乖并排～

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