CSS table布局实现图文单元格时文本上方出现多余空白如何解决？

核心原因 #

• 类名不匹配：CSS中定义的表格行选择器是.Row，但HTML里实际使用的类名是TableRow，两者没有对应上，导致行元素没有正确应用display: table-row属性，整个表格布局逻辑异常，产生多余空白。
• table-cell默认对齐规则问题：就算类名匹配正确，display: table-cell的默认垂直对齐方式为baseline，图片和文本的基线高度差也会导致内容错位，出现顶部空白。

修复代码 #

CSS修改示例 #

/* 把.Row修改为.TableRow和HTML对应，也可以反过来修改HTML类名匹配.Row */
.TableRow {
    border: 1px solid red;
    display: table-row;
    margin: 0px;
    padding: 0px;
}

.PicDiv {
    border: 1px solid black;
    display: table-cell;
    margin: 0px;
    padding: 10px;
    width: 36px;
    /* 新增顶部对齐，避免基线对齐错位 */
    vertical-align: top;
}

.TextDiv {
    border: 1px solid black;
    display: table-cell;
    margin: 0px;
    padding: 0px;
    width: auto;
    /* 新增顶部对齐，避免基线对齐错位 */
    vertical-align: top;
}

/* 可选优化：消除图片作为行内元素默认自带的下方空白 */
.PicDiv img {
    display: block;
    width: 100%;
}

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