img、canvas、video和auido导致父元素高度增加有3px或者4px

页面简单的代码结构如图所示：

代码中：我们设置img是300*300，父元素是不设置宽高的，想父元素的宽高随子元素进行自适应。让我们实际效果如下图所示：

发现实际和我们想象的不一样，怎么父元素多了4px。

原因是基线问题，div是块级标签，img是行内块元素，在块元素里默认有3px或者4px空白（其实就是和文本的基线对齐不管有没有文本）。

1. 将img、canvas、video和auido的display改为block（个人比较推荐）
2. 将img、canvas、video和auido的vertical-align改为top
3. 父元素font-size设置为0（但是不推荐使用）
4. 父元素overflow设置hidden（但是不推荐使用）