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

问题描述

<p> <a href='https://www.haobala.com/wenda/5967.html'><img src='https://www.haobala.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这个搭配怎么弄出来的？