如何对齐div与span 实现90px等高网速展示布局并消除多余空白间距

当前出现多余空白的核心原因有两点：

• 布局上下文不完整：代码中给.left-text和.multi-line-item设置了display: table-cell，但父容器.summury-text没有设置display: table，table-cell元素脱离了正常的表格布局上下文，默认基线对齐方式会导致两个并排块产生垂直方向的偏移间隙
• CSS规则冲突：全局生效的.summury-text span{display:table-cell;}规则，会无差别把容器内所有span元素变成表格单元格，和进度条内部需要的块级布局逻辑冲突，进一步打乱元素高度计算，产生多余空白

仅调整3处CSS规则，即可实现左右区域严格90px高度对齐、无多余空白的效果：

• 给父容器补全表格布局基础属性，让.summury-text作为真正的表格容器，使两个并排子元素成为同一行的表格单元格
• 给两个并排的表格单元格设置顶部垂直对齐，消除基线对齐带来的垂直偏移
• 删除冲突的全局span显示规则，让进度条内部的块级布局正常生效

修正后的完整可运行CSS代码如下：

.summury-text{
  width:500px;
  margin:0 auto;
  display: table;
  table-layout: fixed;
}
.devider{
  height:10px;
}
.summury-text.multi-line{
  height:90px;
}
.summury-text.multi-line .left-text{
  line-height:90px;
  vertical-align: top;
}
.summury-text .multi-line-item{
  display:table-cell;
  height:90px;
  vertical-align: top;
}
.summury-text .left-text{
  width:150px;
  background-color:#005fff;
  color:#fff;
  display:table-cell;
  line-height:90px;
}
.summury-text .right-text{
  width:100%;
}
.summury-text .right-text.meter{
  text-align:left;
  height: 40px;
  line-height:40px; 
  position: relative;
  background: #f3efe6;
  overflow: hidden;
}
.summury-text .right-text.meter span {
  display: block;
  height: 100%;
}
.summury-text .right-text.meter span.meter-text{
  text-align:center;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

.progress {    
    -webkit-animation: progressBar 3s ease-in-out;
    -webkit-animation-fill-mode:both; 
    -moz-animation: progressBar 3s ease-in-out;
    -moz-animation-fill-mode:both; 
    text-align:left;
}

.progress.danger {background-color:#dc3545}
.progress.success {background-color:#28a745}
.progress.info {background-color:#17a2b8}
.progress.primary {background-color:#007bff}
.progress.warning {background-color:#ffc107}


@-webkit-keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

@-moz-keyframes progressBar {
  0% { width: 0; }
  100% { width: 100%; }
}

• 左侧蓝色Speed区块高度严格为90px，和右侧内容区总高度完全一致
• 右侧内容区总高度为：上行进度条40px + 分隔线10px + 下行进度条40px = 90px，和左侧无高度差
• 所有元素顶部严格对齐，不会出现类似内边距的多余垂直空白

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