Html <；img>；把包装纸的底部伸出来

我有一个包装器包装了3个div，它们是内联块，所有3个div都是128px高。任何地方都没有填充或空白。第一个div包含一个图像，其高度与另外两个不同（低3.3px）

产品名称
数量：
从购物车上取下
$$$

代码是用JSX编写的。
我已经尝试将包装器设置为128px，但是

仍然突出底部

---

为什么

会这样做？

将

垂直对齐：top

添加到三个

的样式属性中。此对齐的

内联块

元素沿其上边缘对齐

<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>

产品名称
数量：
从购物车上取下
$$$

---

有关更多信息，请参阅。

似乎使所有三个div都浮动可以修复突出的图像，但由于它们是浮动的，因此包装器需要一个定义的高度。您可能希望在HTML中发布此代码。如果不必首先将JSX转换为html，那么更多的受众将愿意帮助您。这还允许人们创建工作JSFIDLE来演示他们提出的更改。

<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>