父容器高度大于子图片高度的原因

现象：

<!doctype html>
<html>
<head><title>父容器高度大于子图片高度</title>
</head>
<body><select id="lineselector"><option value="baseline">baseline</option><option value="sub">sub</option><option value="super">super</option><option value="top">top</option><option value="text-top">text-top</option><option value="middle">middle</option><option value="bottom">bottom</option><option value="text-bottom">text-bottom</option></select><script type="text/javascript">document.querySelector("#lineselector").onchange = function(){document.querySelector("#line").style.verticalAlign = this.value;document.querySelector("#image").style.verticalAlign = this.value;}</script><div style="border: 1px blue solid;"><div id="line" style="position: relative; height: 0px; width: 0px; display: inline-block; overflow: visible; vertical-align: baseline;"><div style="position: absolute; height: 1px; width: 99999px; background: gray; overflow: hidden;">&nbsp;</div></div><img id="image" src="http://www.baidu.com/img/bdlogo.gif" style="border: 1px red solid;"/></div>
</body>
</html>

View Code

baselinesubsupertoptext-topmiddlebottomtext-bottom （不知道怎么在博客里插入js）

div高度比图片高度大。

原因：img是inline元素，有假想元素。基于baseline定位时，父容器高度为假想元素的下半部分高度+图片高度。

解决方法：即消除假想元素影响。可以是 img { display: block; }; 可以是 div { line-height: 0}; 可以是img { vertical-align: middle//也可以是其他值 }; 可以是 div { font-size: 0};

感谢：Along和小黄鱼提供的帮助。

参考：http://www.cnblogs.com/winter-cn/archive/2013/05/11/3072929.html#2679273

转载于:https://www.cnblogs.com/snadn/p/3142745.html

父容器高度大于子图片高度的原因相关推荐

【转】解决父容器高度不跟随子元素扩大的问题
原文链接:http://blog.sina.com.cn/s/blog_674379bf0100lyy3.html 方法一: 编写CSS使用DIV的FLOAT属性使元素浮动,在父容器中添加zoom:1 ...
[译] 关于CSS中的float和position (父容器div内的子元素div为float时，父元素无法撑开（或高度自适应）的解决方式)
测试案例:http://blog.csdn.net/goodshot/article/details/44408245 当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求, ...
在父容器没有高度的情况下给元素设置百分比高度
在实际的开发过程中经常会有这种CSS问题,就是父容器是没有高度的,可是我还要给子容器设置百分比的高度.所以本篇博客就诞生了.就是为了帮助朋友们解决这个问题. 一:设置vh单位 vh单位就是自动检测你的 ...
html 填满父容器,CSS让子元素div的高度填满父容器的剩余空间的方法
1.使用浮动的方式效果图: 代码如下:(注意,此时.content的高度是500px,即父元素的高度,但是浮动元素在 .content 上方,盖住了 .content,将 .nav背景样式改为 ba ...
父元素没有高度，子元素高度失效
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...
HTML为什么图片会自动在中间,html中怎么让一个图片（img）在大于父容器（div）的情况下仍中间部份居中...
html中怎么让一个图片(img)在大于父容器(div)的情况下仍中间部份居中以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下 ...
父元素自适应子元素的高度
在设计中宽度我们通常可以进行控制,但高度却没有明确的控制,一般元素的高度都是由子元素来控制的.即子元素的高度和决定了父元素的高度.当然手动设置父元素的指定高度也是可以的. 问题:百分比控制的父元素有时 ...
【讨论课2】学校里面针对一些高大树木进行处理，处理措施如下：（1）高度大于50米的树木，采用“巨型升降机”砍伐，将其截成11节；（2）高度在40米到50米之间的树木，采用“巨型升降机”砍伐，每5米将其
题目学校里面针对一些高大树木进行处理,处理措施如下: (1)高度大于50米的树木,采用"巨型升降机"砍伐,将其截成11节: (2)高度在40米到50米之间的树木,采用" ...
父div随着子div的高度改变而改变
父div随着子div的高度改变而改变问题情况1:父div未设置高度,子div为标准流(即未设置浮动) <body><div class="aa">父div ...

父容器高度大于子图片高度的原因

父容器高度大于子图片高度的原因相关推荐

最新文章

热门文章