inline-block div序列隐式间距问题：为何我的ruler显示过宽？

我尝试通过制作标尺来理解和测试绝对长度测量，该标尺应包含宽度1cm的major div、宽度1mm的minor div，半毫米标记高度略高。但整体显示过宽。注意：我并非寻求更优标尺绘制方案，而是想明确错误来源——为何显示过宽？我认为问题不在刻度线宽度，白色区域的毫米间距明显过宽。请问我哪里操作有误？

提供的代码 #

CSS代码 #

div {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}
div.ruler {
  counter-reset: major minor;
  width: 10cm;
    white-space: nowrap;            
}
div.major::after {
  counter-increment: major
}
div.major {
  width: 1cm;
  height: 5mm;
  text-align: left;
    content: open-quote counter(major) "bla";
  border-left: 1px solid black;
    display: inline-block;
}
div.minor {
  width: 1mm;
  height: 1mm;
  border-right: 1px solid black;
    display: inline-block;
}
div.half {
  height: 2mm;
}

HTML代码 #

<html>
    <head>
        <title>Screen Geometry and Gestures</title>
    </head>
    <body>
        <main>
            <h1>Screen Geometry and Gestures</h1>
            <section>
                <h2>Length Units</h2>
                <p>Let's make a ruler!</p>
                <div class="ruler">
                    <div class="major">
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>               
                        <div class="minor half"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>               
                        <div class="minor"></div>               
                    </div>
                    <div class="major">
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>               
                        <div class="minor half"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>               
                        <div class="minor"></div>               
                    </div>
                    <div class="major">
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>               
                        <div class="minor half"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>               
                        <div class="minor"></div>               
                    </div>
                    <div class="major">
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>               
                        <div class="minor half"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>               
                        <div class="minor"></div>               
                    </div>
                    <div class="major">
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>               
                        <div class="minor half"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>
                        <div class="minor"></div>               
                        <div class="minor"></div>               
                    </div>
                </div>
            </section>          
        </main>
    </body>
</html>

错误原因解析 #

1. inline-block元素的空白间隙 #

所有.major和.minor都设置了display: inline-block，HTML中这些div标签之间的换行、空格会被浏览器解析为空白字符，这些空白会占据额外宽度——这就是你看到的“白色区域毫米间距过宽”的核心原因。

2. 边框未纳入宽度计算 #

.major的border-left:1px和.minor的border-right:1px会叠加在你设置的width属性之上，进一步增加元素总宽度。默认情况下，CSS的width仅指内容宽度，边框会额外占用空间。

3. 内部元素数量与宽度不匹配 #

每个.major宽度设为1cm（等于10mm），但你只在其中放置了9个.minor，每个.minor宽度1mm，加上边框后，内部元素总宽度和.major的1cm不匹配，导致布局错位。

4. 无效的content属性设置 #

你把content属性直接写在了.major的样式里，而content是伪元素（比如::after）专属属性，当前这个设置完全无效，属于冗余代码，但不影响宽度。

针对错误的修复（仅解决宽度问题，非重构方案） #

如果要解决当前的宽度问题，不需要重构标尺，只需调整以下几点：

1. 给所有元素添加box-sizing: border-box，让边框包含在宽度内；
2. 给.ruler设置font-size:0，消除inline-block元素间的空白间隙；
3. 每个.major内添加10个.minor，匹配1cm的宽度；
4. 把content属性移到::after伪元素中，使其生效。

修正后的核心CSS：

div {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 边框纳入宽度计算 */
}
div.ruler {
  counter-reset: major minor;
  width: 10cm;
  white-space: nowrap;
  font-size: 0; /* 消除inline-block空白 */
}
div.major::after {
  counter-increment: major;
  content: counter(major); /* 正确设置伪元素内容 */
  font-size: 12px; /* 恢复字体大小 */
  margin-left: 2px;
}
/* 其他样式保留，仅调整上述部分 */

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