css3 - 为啥img的高度和a的高度不一样

Question

<p>
    <a href="">
        <img src="images/1.jpg" alt="">
    </a>
</p>

css
*{
    margin: 0;padding: 0;
}

@media (min-width: 320px) {
html {
    font-size: 100px;
}
}
@media (min-width: 360px) {
html {
font-size: 112.5px;
}
}
@media (min-width: 400px) {
html {
font-size: 125px;
}
}
p{
    margin: 2%;
}
a{
    display: block;
}
img{
    height: .64rem;
}

为什么img的高度是64px，而a的高度是114px呢？

Answer 1

確定margin,padding都取消了？

Answer 2

img標籤加上 display:block
或
a標籤加 font-size:0 或 line-height:0

Answer 3

因為img是內嵌元素，外層有個預設line-height

Answer 4

em具有繼承性
img高度以em計算的話，它的高度為0.64*a元素的的font-size
以chrome瀏覽器模擬的iphone5的話，得的結果
img高80px，元素高度為125px

你的64、114這個搭配怎麼弄出來的？