CSS表格单元奇怪的差距问题答案

【问题标题】：CSS table-cell weird gap issueCSS表格单元奇怪的差距问题
【发布时间】：2015-03-24 19:16:17
【问题描述】：

我的 CSS 有问题。在第二个表格单元格的名称上方有一个神秘的边距。更多内容请访问：http://jsfiddle.net/xnms15uf/

<div id="comment">
    <div id="left_side">
        <div id="comment_picture">
            <img src="https://safebash.com/users/16556250737679624820/pictures/profile/4fa22e3ff2d4828b20d8c5561181b17b_nano.jpg">
        </div>
    </div>
    <div id="right_side">
        <div id="comment_name">Peter</div>
    </div>
</div>

CSS

#comment {
    width: 550px;
    height: 50px;
    display: table;
}

#left_side {
    width: 40px;
    background: #00ff00;
    display: table-cell;
}

#right_side {
    background: #ff0000;
    display: table-cell;
}

更新：这就是我想要实现的

（来自 Illustrator 的矢量）

【问题讨论】：

取消显示：表格单元格和边距消失了。
在 Safari 中不起作用
这是你想要的jsfiddle.net/j08691/xnms15uf/2吗？
完全正确！！！太感谢了！我真的很感激

标签： css html tablecell

【解决方案1】：

#right_side {
background: #ff0000;
display: table-cell;
vertical-align:top;}

如果我的理解正确，这就是让文本“彼得”在顶部没有那个间距所要做的一切。

【讨论】：