Html 前端 a 内部是img 元素，样式设置 宽度和 外层a 一样，这样外层的a 高度就会根据 引用的img 高度而自适应。但是发现外层的a 高度比 img 元素高度大了5px 。
工具/原料
HTML CSS
方法/步骤
1 
红色边框是 A元素的边界，蓝色边框是 Img的边界。 网页审查元素可以看到 此时 ，a 标签高度是280px。
元青花。。元青花。。元青花。
2
Img 标签的高度是275px，明显看出来和外层 a 元素高度相差 5px。那这是什 么原因呢？接下来说说。
3
img元素是一个匿名文本，该文本有一个匿名行级盒子，它的默认vertical-align是baseline，又因为上下文line-height的影响，它有一个line-height，从而使其所占高度变大，盒子下沉，往下撑开了一些距离。
4
解决高度不一致的办法有3种： 1、给其父元素 A 设置line-height:0或font-size:0; 2、 给img设置vertical-align:top，让其以top顶部对齐，而不是baseline基 准线对齐。 3、给img的显示设置为display:block;让它和匿名行级盒子不在一个布局上下 文中，也就不存在行级盒。img是行内元素，默认display: inline; 它与文本 的默认行为类似，下边缘是与基线对齐，而不是紧贴容器下边缘。将displa yp设置为block即可消除上面说的几个像素的差别。
5
采用第二种方法： 设置块元素，显示效果如下图所示。
6
到此已解决 A或者div 内部img 高度不一致的问题。
上一篇：无花果的功效与作用