table式DIV布局中图片旁item1类文本对齐与间隙修复问题求助

问题核心原因 #

• display: table-cell 属性的元素完全不支持margin属性，你之前调整的margin-left、margin全部无效，这是空隙产生的核心原因
• 第一行的.item设置了700px宽度，和同单元格的.item-price总宽度超过父容器.itemwrapper的706px，导致下方行的单元格宽度被自动撑出多余空间
• 多余的浮动、负margin样式打乱了table布局的原生排列规则
• p标签自带默认上下边距，你用负margin调整属于错误适配，反而会导致布局偏移

修复后完整CSS代码 #

/* 全局统一盒模型，避免边框内边距撑宽元素 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.mainwrapper {
    border: 2px solid;
    display: table;
    margin-bottom: 20px;
    /* 固定总宽度，避免单元格自动拉伸 */
    width: 706px;
}

.itemwrapper {
    display: table-row;
}
/* 标题行单元格统一样式 */
.item, .item-price {
    display: table-cell;
    border: 1px solid;
    padding: 1em;
    background-color: blue;
    color: white;
}
.item {
    /* 标题栏左单元格占剩余宽度 */
    width: 100%;
}
.item-price {
    width: 300px;
    text-align: center;
}
/* 信息行单元格统一样式 */
.picture, .item1 {
    display: table-cell;
    border: 1px solid;
    /* 垂直顶部对齐，实现文本和图片顶部对齐，要居中改成middle即可 */
    vertical-align: top;
}
.picture {
    width: 94px; /* 90px内容+2px*2边框，刚好匹配你要的90px展示宽度 */
    padding: 2px; /* 替代原来无效的margin */
}
.picture img {
    height: 185px;
    /* 去掉图片底部默认的3px空隙 */
    display: block;
}
.item1 {
    padding: 1em; /* 用padding控制文本和左边图片的间距，替代无效的margin */
}

修改说明 #

• 新增全局box-sizing: border-box规则，边框、内边距都会算在你设置的宽度内，不会额外撑宽元素
• 删掉了所有无效的margin设置、多余的浮动和负margin样式
• 给.mainwrapper固定总宽度，避免table布局自动拉伸宽度
• 图片设置display: block清除默认底部空隙
• 统一用padding控制单元格内边距，实现你要的间距效果

验证效果 #

直接替换原有CSS即可，HTML结构完全不用改，就能实现图片和文本紧邻对齐、无多余空隙的table布局效果，完全符合你要的纯HTML+CSS静态布局要求。

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