Button标签未遵循父Div高度致图片溢出的原因排查

导致内部img溢出父Div的是Button标签的几个默认浏览器样式与布局特性：

• 默认的内边距、边框与盒模型
  浏览器给Button标签预设了非零的padding和border样式，而且默认采用content-box盒模型——也就是元素的总高度=内容高度+上下padding+上下border。当父Div设置固定高度后，Button的总高度会因为自带的padding和border超出父Div的高度限制，内部设置height:100%的img会基于Button的内容高度计算，再加上Button的padding和border，最终整体高度超过父Div，造成溢出。

• 行内块元素的垂直对齐规则
  Button默认属于inline-block元素，它的垂直对齐方式默认是baseline，这种对齐规则会让Button在父容器中产生额外的底部留白，进一步放大高度溢出的问题。

• 未默认开启溢出裁切
  Button标签默认的overflow属性值不是hidden，当内部元素高度超出自身高度限制时，不会自动裁切内容，直接导致img溢出到父Div外部。

移除Button标签后，img直接作为Div的子元素，父Div的高度设置可以直接作用于img，同时没有额外的padding、border和垂直对齐偏差，自然就能正常适配父Div高度。

内容的提问来源于stack exchange，提问作者wyc