H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【CSS】为啥img的高度和a的高度不一样

<div>
    <a href="">
        <img src="images/1.jpg" alt="">
    </a>
</div>
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;
}
}
div{
    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这个搭配怎么弄出来的?

本文地址:H5W3 » 【CSS】为啥img的高度和a的高度不一样

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址