CSS table-cell奇怪的差距问题

Question

我的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的载体）

Answer 1

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

如果我理解正确，这就是你需要做的所有事情来获得文本＆＃39; Peter＆＃39;在顶部没有那个间距。