image底部有額外的空隙
<div className="em-goods-image">
<img src={this.props.image}/>
</div>
使用了如下的CSS
.em-goods-image img {
width: 100%;
}
顯示的時(shí)候如下
div跟圖片的高度并沒(méi)有一樣躲雅，div比圖片高。 這是由于image是inline element屠缭，瀏覽器在繪制的時(shí)候箍鼓，默認(rèn)跟旁邊的文字baseline對(duì)齊（即使旁邊沒(méi)有文字），所以底部有空隙呵曹。 具體inline element的繪制可以參考http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
解決方法
一種是用vertical-align
.em-goods-image img {
width: 100%;
vertical-align: bottom
}
另外一種是把image變成block
.em-goods-image img {
width: 100%;
display: block
}
