JSFiddle - React, Tailwind, and code Playground

by camnpr

HTML

<div class="wrapper"><img src="http://dummyimage.com/300x100/08c/fff&text=initial"></div>
<div class="wrapper fix1"><img src="http://dummyimage.com/300x100/08c/fff&text=display:block"></div>
<div class="wrapper fix2"><img src="http://dummyimage.com/300x100/08c/fff&text=vertical-align:bottom"></div>
<div class="wrapper fix3"><img src="http://dummyimage.com/300x100/08c/fff&text=line-height:0"></div>

CSS

.wrapper {
    width: 300px;
    margin: 10px;
    border: solid tomato;
}

.fix1 img {
    display: block;
}

.fix2 img {
    vertical-align: bottom;
}

.fix3 {
    line-height: 0;
}

JavaScript

/*一个图片包裹在DIV中，为什么图片下边有空隙*/