Div布局宽度无法完全展开及底部间距问题求助

问题1：header块底部微小间距的消除 #

这个空隙是inline-block元素的默认基线对齐或父元素行高导致的，两种直接解决方式：

• 给header设置line-height: 0;，清除行高带来的额外空隙；
• 将.detail-title和.detail-value的display属性从inline-block改为block，让元素独占一行，彻底避免inline-block的默认间距问题。

问题2：Metric值底部边框延伸至全宽 #

你设置width:100%后布局变两列，是因为.detail-value仍为inline-block，会和同级的.detail-title挤在一行排列。解决步骤：

1. 把.detail-value的display改为block，让它独占一行；
2. 再设置width:100%，此时底部边框就能铺满容器全宽；
3. 若要更灵活的布局，给.detail-block添加display:flex; flex-direction:column;，强制内部元素上下排列，再给.detail-value设width:100%也可实现效果。

核心代码调整示例 #

/* 解决header底部间距 */
header {
  line-height: 0;
}

/* 解决边框全宽问题 */
div.detail-block {
  display: flex;
  flex-direction: column;
}

div.detail-block .detail-value {
  display: block;
  width: 100%;
  border-bottom: 1px solid #aaa;
}

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