CSS总结

image底部有额外的空隙

<div className="em-goods-image">
      <img src={this.props.image}/>
</div>

使用了如下的CSS

.em-goods-image img {
  width: 100%;
}

显示的时候如下

div跟图片的高度并没有一样，div比图片高。 这是由于image是inline element，浏览器在绘制的时候，默认跟旁边的文字baseline对齐（即使旁边没有文字），所以底部有空隙。 具体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
}