css3 - 為啥img的高度和a的高度不一樣

問題描述

<p> <a href='http://www.wxshucaidpc.com/wenda/5967.html'><img src='http://www.wxshucaidpc.com/wenda/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呢？

問題解答

確定margin,padding都取消了？

img標簽加 display:block 或者a標簽加 font-size:0 或 line-height:0

因為img是內聯元素，外層有個默認line-height

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

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