移除a标签display:inline-block后main出现滚动条的原因及替代方案

1. 移除display:inline-block后出现滚动条的原因 #

默认情况下，<a>标签是inline元素，它的默认垂直对齐方式为vertical-align: baseline。这个特性会让元素底部与父容器的文本基线对齐，而基线下方会预留出一段空间（用于容纳字体的下伸部分，比如字母g、y的底部）——哪怕你的链接里没有这类字符，这个预留空间依然存在。

结合你的CSS来看：链接设置了padding: 6px 13px，当它是inline元素时，上下padding会和基线下方的预留空间叠加，导致.container的高度被意外撑高。而<main>元素设置了overflow-y: auto，当内容高度超过视口或父容器的可用高度时，就会触发滚动条显示。

2. display:inline-block如何避免滚动条 #

当把链接设置为display: inline-block后，元素的布局行为发生了关键变化：

• 它兼具inline元素的行内特性和block元素的盒模型特性，会将自身的padding、margin完全包含在盒内，不再依赖父容器的文本基线来对齐。
• inline-block元素的默认基线是自身的底部边缘（而非文本基线），不会产生额外的底部预留空间，因此.container的高度会按照实际内容（包括链接的padding）准确计算，不会超出<main>的可用高度，自然就不会触发滚动条。

3. 其他避免滚动条的方法 #

除了使用display:inline-block，还有这些实用方案可以解决问题：

• 修改垂直对齐方式：给链接设置vertical-align: top（或middle、bottom），直接改变inline元素的对齐规则，消除基线下方的预留空间：

  a.start {
    vertical-align: top;
    /* 其他样式保持不变 */
  }
  

• 设置为块级元素：将链接改为display: block，完全脱离inline元素的布局规则，块级元素的高度会准确包裹自身内容：

  a.start {
    display: block;
    /* 可额外添加margin控制位置，比如margin-top:10px */
  }
  

• 消除父容器行高影响：给.container设置line-height: 0，但要注意如果容器内有其他文本，需单独给文本元素重新设置line-height：

  .container {
    line-height: 0;
  }
  .container p, .container li {
    line-height: 1.6em; /* 恢复文本行高 */
  }
  

• 使用浮动布局：给链接设置float: left（或right），让元素脱离文档流，避免inline元素的基线问题，记得在父容器末尾清除浮动：

  a.start {
    float: left;
  }
  .container::after {
    content: "";
    display: block;
    clear: both;
  }
  

• 重置父容器字体大小：给.container设置font-size: 0，消除inline元素的字体基线空间，同样需要给子文本元素重新设置font-size：

  .container {
    font-size: 0;
  }
  .container h2, .container p, .container li {
    font-size: 15px; /* 恢复原字体大小 */
  }
  

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