CSS table-单元格奇怪的间隙问题
CSS table-cell weird gap issue
我的 css 有问题。在第二个 table 单元格 div 中,名称上方有一个神秘的边距。请查看更多信息: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 的矢量)
#right_side {
background: #ff0000;
display: table-cell;
vertical-align:top;}
如果我没理解错的话,这就是让文本 'Peter' 顶部没有间距所要做的全部。
我的 css 有问题。在第二个 table 单元格 div 中,名称上方有一个神秘的边距。请查看更多信息: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 的矢量)
#right_side {
background: #ff0000;
display: table-cell;
vertical-align:top;}
如果我没理解错的话,这就是让文本 'Peter' 顶部没有间距所要做的全部。