问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

a嵌套img标签的问题

头像
yaxin
    1.5k184852

    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，这又是为什么呢？

    html
    阅读 47.5k
    7 个回答
    得票最新
    头像
    Johnbug
      16741214

      这是一个很多前端初学者遇到的问题！
      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的框模型上下工夫，对你很有益！

      头像
      Brightness
        1922910

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

        头像
        roshanca
          773114
          a {
  display: block;
}
          头像
          卜卜口
            61831012
            a{display:inline-block;}

            那就再来一个

            a{font:0/0 arial;}
            头像
            ShingChi
              810244
              头像
              公子
                36.6k145573

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

                头像
                Carson
                  67441129

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

                  头像
                  ZhaoKai
                    21
                    新手上路，请多包涵
                    a{display: inline-block;}
img{float: left;}
                    撰写回答
                    你尚未登录，登录后可以
                    • 和开发者交流问题的细节
                    • 关注并接收问题和回答的更新提醒
                    • 参与内容的编辑和改进，让解决方法与时俱进
                    被 2 篇内容引用
                    推荐问题
                    宣传栏