css3 - 为啥img的高度和a的高度不一样
高洛峰
高洛峰 2017-04-17 11:31:14
0
4
563
<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呢?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all(4)
黄舟

Are you sure the margin and padding have been cancelled?

小葫芦

Add display:block

to the
img tag or add font-size:0 or line-height:0
to the

a tag
刘奇

Because img is an inline element, the outer layer has a default line-height

Ty80

em is inheritable
If the img height is calculated in em, its height is 0.64*the font-size of the a element
If the iPhone 5 is simulated with the chrome browser, the result is
img high 80px, element height is 125px

How did you come up with the combination of 64 and 114?

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template