<a>标签中包裹<img>标签,为什么<a>标签中显示的高度与<img>标签的高度相差那么大?(如图) 10C
先看代码:


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    *{margin:0 ; padding:0;}
  </style>
</head>
<body>
  <a href="#">
    <img src="http://file.baixing.net/201709/cdfc1b368dfeb5198a5bf25f9ab30e91.png" alt="">
  </a>
</body>
</html>


或者也可以在JSBIN中看到运行结果:https://jsbin.com/kihukazuve/edit?html,output


<img>标签的高度

<img>标签的高度




<a>标签的高度

<a>标签的高度

6个回答

a是inline元素,本身就没有高度,你看控制台右边方框中的宽高都是auto。也就是官方标准没有规定。
对于官方标准没有规定的地方,呵呵,那就是各个浏览器自己自由发挥了。
谷歌或ie8+浏览器中是只有文本字体的高度。ie7-浏览器中是a元素中所有内容的高度。

要谷歌浏览器的a元素呈现所有内容的高度。要设置 a{display: inline-block;}

a标签属于行内元素,本事是没有高度的

解决方法:
对a标签样式加display:block;或者display:inline-block;加后实现成块状属性

还有就是img样式单独style="height:40px"

a标签属于行内元素,img标签属于块级元素。a标签设置display: inline-block;或者display: block;属性后变成块级元素即可设置宽高

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问