html – 图像和跨度之间的奇怪填充

概述我在图像和跨度之间有一个奇怪的填充,我无法摆脱. <div> <img src="http://placehold.it/100x100" /> <span>hello</span></div>img{ padding:20px; background: red;}span{ width: 300px; background-color: 我在图像和跨度之间有一个奇怪的填充,我无法摆脱.

<div>    <img src="http://placehold.it/100x100" />    <span>hello</span></div>img{    padding:20px;    background: red;}span{    wIDth: 300px;    background-color: blue;    display: inline-block;    vertical-align: top;    height: 100%;}

正如你在fiddle中看到的那样,我在红色和蓝色元素之间有一些空间.无论我做什么,我都无法摆脱它.我也很感激有人可以告诉我为什么我的身高：100％;不适用于第二个元素(它应该与图像的高度相同).

解决方法 有一个奇怪的填充,因为< img>之间有一个空格.和< span>在HTML源代码中.

<div>    <img src="http://placehold.it/100x100" />    <span>hello</span></div>

删除空间将消除填充.

<div>    <img src="http://placehold.it/100x100" /><span>hello</span></div>

但这可能不是你想要的(继续阅读).根据你的第二个问题,100％不起作用的原因是因为< div>未给出高度,并且没有任何基于百分比高度. < div>这里的高度是其内容高度的结果.它需要较高元素的高度,以便它可以容纳两者.

所以你实际需要的是display：table.使用表格可以很容易地并排放置图像和文本.

div {    display: table;}img {    display: table-cell;    padding:20px;    background: red;}span {    display: table-cell;    wIDth: 300px;    background-color: blue;    vertical-align: top;    height: 100%;}

See demo here.

总结

以上是内存溢出为你收集整理的html – 图像和跨度之间的奇怪填充全部内容，希望文章能够帮你解决html – 图像和跨度之间的奇怪填充所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。