如何消除跑马灯滑块底部无法移除的多余空白间距

问题根因 #

你遇到的底部空白是.marquee元素设置display: inline-block导致的：行内块元素默认vertical-align属性值为baseline，会预留出英文字符下沉部分（比如g、p、y的底部）的高度空间，最终体现为容器下边框外的白色空白。

解决方法 #

你可以任选以下任意一种方案修改即可：

• 方案1：给.marquee添加vertical-align: top属性，覆盖默认的基线对齐规则，不影响其他原有样式

  .marquee {
    white-space: nowrap;
    font-size: 24px;
    font-family: 'OPTIImprovNewWideNine';
    overflow: hidden;
    display: inline-block;
    animation: marquee 10s linear infinite;
    vertical-align: top; /* 新增这一行 */
  }
  

• 方案2：把.marquee的display: inline-block修改为display: block，脱离行内元素布局规则，直接适配父容器宽度

  .marquee {
    white-space: nowrap;
    font-size: 24px;
    font-family: 'OPTIImprovNewWideNine';
    overflow: hidden;
    display: block; /* 把inline-block改成block */
    animation: marquee 10s linear infinite;
  }
  

• 方案3：给父容器.wrapper添加font-size: 0属性，消除行内布局的默认字符间距，你已经给.marquee单独设置了font-size，新增该属性不会影响文字显示

  .wrapper {
    max-width: 100%;
    overflow: hidden;
    background: #A3E6BD;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    font-size: 0; /* 新增这一行 */
  }
  

内容的提问来源于stack exchange，提问作者Quinty van Dijk