<img> sticks out the bottom of its wrapper - html

Question

I have a wrapper wrapping around 3 divs that are inline-block and all three divs are 128px high. There is no padding nor margin anywhere. The first div contains an image and ends up not the same height as the other two (lower by 3.3px).
<div style={{width:"700px",height:"700px",position:"relative",left:"50%",transform:"translateX(-50%)"}}>
<hr style={{width:"100%"}}/>
<div>
<div style={{display:"inline-block",width:"128px",height:"128px",backgroundColor:"grey",position:"relative",top:0}}>
<img style={{width:"100%"}} src="https://screenshotlayer.com/images/assets/placeholder.png"/>
</div>
<div style={{display:"inline-block",height:"128px",width:"*"}}>
<span style={{display:"block"}}>Name of Product</span>
<span style={{display:"block"}}>Quantity: <input type="text" className="form-control" style={{width:"50px",display:"inline-block"}}/></span>
<span style={{display:"block"}}><button className="btn-link">Remove from cart</button></span>
</div>
<div style={{display:"inline-block",height:"128px",float:"right"}}>
<span style={{position:"relative",top:"50%",transform:"translateY(-50%)",display:"block"}}>$$$</span>
</div>
</div>
<hr style={{width:"100%"}}/>
</div>
The code is written in JSX.
I've tried setting the wrapper to 128px, but the <img> is still sticking out the bottom
Why does the <img> act like that?

Answer 1

Add verticalAlign:top to each of the three <div>'s style attributes. This align's inline-block elements along their top edges.
<div style={{width:"700px",height:"700px",position:"relative",left:"50%",transform:"translateX(-50%)"}}>
<hr style={{width:"100%"}}/>
<div>
<div style={{verticalAlign:"top",display:"inline-block",width:"128px",height:"128px",backgroundColor:"grey",position:"relative",top:0}}>
<img style={{width:"100%"}} src="https://screenshotlayer.com/images/assets/placeholder.png"/>
</div>
<div style={{verticalAlign:"top",display:"inline-block",height:"128px",width:"*"}}>
<span style={{display:"block"}}>Name of Product</span>
<span style={{display:"block"}}>Quantity: <input type="text" className="form-control" style={{width:"50px",display:"inline-block"}}/></span>
<span style={{display:"block"}}><button className="btn-link">Remove from cart</button></span>
</div>
<div style={{verticalAlign:"top",display:"inline-block",height:"128px",float:"right"}}>
<span style={{position:"relative",top:"50%",transform:"translateY(-50%)",display:"block"}}>$$$</span>
</div>
</div>
<hr style={{width:"100%"}}/>
</div>
See My inline-block elements are not lining up properly for additional information.