img元素高度多出来的几像素

HTML：

<div class="test"><img src="body2.jpg" alt=""></div>

CSS:

*{margin: 0;padding: 0;}
.test img{height: 100px;}

img的外边距和内填充均为0，然而.test的内容高度大于img的高度

img元素是一个匿名文本，该文本有一个匿名行级盒子，它的默认vertical-align是baseline，又因为上下文line-height的影响，它有一个line-height，从而使其所占高度变大，盒子下沉，往下撑开了一些距离。

从根本上解决的办法：

给其父元素设置line-height:0或font-size:0;
给img设置top对齐;
给img的显示设置为display:block;

PS：http://segmentfault.com/q/1010000003938500

转载于:https://www.cnblogs.com/mengxuan/p/4929463.html

img元素高度多出来的几像素相关推荐

vue如何获取div的宽度_vue获取dom元素高度的方法
获取DOM高度: 要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作(参照生命周期钩子mounted语法:https://cn.vuejs.org/v2/api/#mo ...
html 获取页面元素高度,浅谈JavaScript获取元素的大小（高度和宽度）的方法
本篇文章给大家介绍一下JavaScript获取元素的大小(高度和宽度)的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在 JavaScript 中,使用下面 3 组属性可以获 ...
原生js获取html元素高度,js获取页面及个元素高度、宽度的代码
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
css 子元素设置float,父元素高度塌陷
以div元素为例.div元素的高度会通过内容自动撑开.也就是说,内容有多少,高度就有多高.但是当内部元素设置了float属性之后,会是父元素高度塌陷 <div class="conta ...
解决父级元素高度塌陷问题的方法
解决父级元素高度塌陷问题的方法参考文章: (1)解决父级元素高度塌陷问题的方法 (2)https://www.cnblogs.com/anxiaobei/p/3905187.html 备忘一下.
javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight ...
CSS元素高度塌陷的几种常见解决办法！
同学们在进行页面布局的时候,经常会使用到float浮动进行样式控制,但如果我们没有设置父元素的高度的时候使用浮动就会导致后面的子元素出现问题,也就是高度塌陷.下面小千就给大家介绍几种常见的解决CSS高 ...
父元素高度固定，如何使其中的文字垂直居中？
方法一: 设置父元素高度,设置子元素行高垂直居中 <style> *{padding: 0;margin:0;font-size: 12px;} div{float: left;width ...
垂直居中-父元素高度确定的多行文本（方法二）
除了上一节讲到的插入table标签,可以使父元素高度确定的多行文本垂直居中之外,本节介绍另外一种实现这种效果的方法.但这种方法兼容性比较差,只是提供大家学习参考. 在 chrome.firefox 及 ...

img元素高度多出来的几像素

img元素高度多出来的几像素相关推荐

最新文章

热门文章