请问div内部的img为什么不受div样式的束缚？

Question

我在button按钮中添加了一个图标和文字，index代码如下

            <button className={styles.buttonstyle}>
                <div className={styles.imagewrapper}>
                    <img src={changeButton}/>
                </div>
                切换
            </button>

less代码如下：

.buttonstyle{
    color:#84b0d9;
    background-color:#ffffff;
    border-radius:13px;
    width:75px;
    height:25px;
    font-size:14px;
    border:0;
    outline:none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
    display: flex;
    align-items: center;
}

.buttonstyle:hover{
    color:#1890ff;
}
.imagewrapper{
    width:14px;
    height:12px;
    margin-right:6px;
    display: table-cell;
    vertical-align: middle;
}

我用imagewrapper样式限制了img外层div的大小，但是这层div没能限制住img，图片还是非常大，如下图中文字下部的淡蓝色部分所示

于是给图片设置宽高,宽和高与imagewrapper宽高一样

            <button className={styles.buttonstyle}>
                <div className={styles.imagewrapper}>
                    <img src={changeButton} style={{width:'14px',height:'12px'}}/>
                </div>
                切换
            </button>

结果div的imagewrapper对应的区域如下图所示，是居中对齐的

但是img对应的区域却在偏下的位置

为什么img不在div的区域内呢？图片大小没有超过div，而且设置了div内部元素垂直居中。

虽然调整img的margin可以解决问题，但是我想知道这个问题的原因，请赐教

Answer 1

img 是行内替换元素，从排版的角度来看与行内块元素表现一致：其在行内的垂直位置受父元素的 vertical-align 和line-height 约束，而且在各浏览器表现不一致，调margin也不能完全兼容。
可以让图片隐形，然后把图片链接作为其父元素的背景，居中contain。
或者用字体图标。