a嵌套img标签的问题

yaxin
  • 1.5k

html结构是这样的,未使用任何样式!

<body>
<div id="container">
	<a href="#"><img src="favicon.png" alt="logo"></a>
</div>
</body>

但在chrome的开发者工具中查看,a的高度并不是图像的高度,而是一个很奇怪的高度。

img_width.png

a_width.png

这是什么原因,如何让a标签的高度与img标签的高度一样

=====================

卜卜口の所说的a{display:inline-block;}确实可以,但是这是为什么,并且此时a标签的高度是176px,并不是170px,这又是为什么呢?

回复
阅读 42.5k
7 个回答

这是一个很多前端初学者遇到的问题!
1、首先,<a>标签是inline的,框模型是:行内框。行内框没有包含图片的表现,<img>的标签就好像放在一条公路上一样。所以要使img能像放进一个盒子一样,就应该使用块级框:比如:

display:block;
/*或者*/
display:inline-block;

关于框模型!推荐你去看看css的官方http://www.w3.org/TR/CSS2/或者网上很多文章都有!http://www.tedlife.com/kuang_mo_xing_zhong_lei_fan_wei_he_shu_xing_yi.html
2、<img>标签为什么会有底下的空白呢?这你要理解所谓的“基线(baseline)”。这是一个英文排版概念。我这里还是引用下知乎人的链接吧!http://www.zhihu.com/question/21558138 讲得很周到!

3、总结这个问题的几种解法:
[a]处理基线

a{display:block;}
img{vertical-align: bottom;}

[b]强行去掉<a>标签的行高

a{display:block;line-height:0px;}

[c]没有设置行高的时候可以去掉字体大小;

a{display:block;font-size:0px;}

4、建议:多多在css的框模型上下工夫,对你很有益!

a标签是内联元素,默认的样式是display:inline。如果要设置内联元素的高度或者宽度,那么就要用display:block或者float来实现。

a {
  display: block;
}
a{display:inline-block;}

那就再来一个

a{font:0/0 arial;}

将img外面的a的font-size和line-height设置为0即可。

A{display:block;overflow:hidden;padding:0px;margin:0px;}

ZhaoKai
  • 2
新手上路,请多包涵
a{display: inline-block;}
img{float: left;}
宣传栏