为何设置相同宽度的HTML div元素显示宽度不一致？

你遇到的问题是inline-block元素之间的空白字符导致的宽度偏差。

当元素设置为display: inline-block时，浏览器会把HTML中元素之间的换行、空格等空白字符渲染成一个空格。这个空格的宽度由父元素的字体大小决定，当你的div宽度只有5px这么小时，这个空白的宽度会被浏览器分配到相邻元素上，导致部分元素看起来多了1px宽度。

解决办法： #

• 消除HTML中的空白字符：把所有div标签连在一起写，或者用注释消除换行，比如：

  <div></div><div></div><div></div>
  <!-- 或者 -->
  <div></div><!--
  --><div></div><!--
  --><div></div>
  

• 设置父元素字体大小为0：给div的父容器添加font-size: 0，这样空白字符的宽度就会被抵消，若div内有文字，再单独给div设置字体大小：

  .div-container {
    font-size: 0;
  }
  div {
    background-color: black;
    width: 5px;
    height: 100px;
    display: inline-block;
    font-size: 16px; /* 若有文字需恢复字体大小 */
  }
  

• 改用Flexbox布局：这是最推荐的现代解决方案，直接给父容器设置display: flex，无需担心inline-block的空白问题：

  .div-container {
    display: flex;
  }
  div {
    background-color: black;
    width: 5px;
    height: 100px;
  }
  

• 使用负margin抵消空白：给div设置负的右外边距，数值根据父元素字体大小调整（通常是-4px或-3px），但这个方法兼容性较差，且不够灵活：

  div {
    background-color: black;
    width: 5px;
    height: 100px;
    display: inline-block;
    margin-right: -4px;
  }
  

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