为了账号安全,请及时绑定邮箱和手机立即绑定

为什么图片会影响文字?这和定义不符合

当图片的设置为 top ,文字设置 bottom ,文字会与图片的底部对齐;

当图片的设置为bottom,文字设置bottom ,文字会比之前下沉;

这是什么原因?

正在回答

1 回答

(1)当图片的设置为 top ,文字设置 bottom :

    首先不是说文字会与图片的底部对齐,而是因为图片太高,高于父容器的内容高度,导致图片对齐父容器的内容文字顶部后撑开了父容器,使父容器高度变高,然后这时父容器的底部巧合和图片底部在同一水平线,然后你就错以为说它后面的文字是和图片底部对齐了,实质上是后面文字与父容器的底部对齐。你自己测试将图片大小变小,小于父容器内容高度,你就明白了,如下:

https://img1.sycdn.imooc.com//5c97ce850001de6d05710151.jpg

(2)当图片的设置为bottom,文字设置bottom:

    会下沉?没感觉噢,我个人认为是不会有下沉的,都会在同一条水平线上。

    假设父容器中不含有其他元素,只有自己的文字内容,那它高度正是他的内容高度,如下图:

https://img1.sycdn.imooc.com//5c97d00a000116ce04560167.jpg

    这时候给他内容加一个图片,设置vertical-align:bottom,图片底部会和上面的内容底部在同一水平线,如下图:

https://img1.sycdn.imooc.com//5c97d15e0001f44404070167.jpg

    这时再在图片后加一段文字(【span】display:inline-block;vertical-align:bottom),它一样是会和父容器初始内容底部在同一水平线,不会受到图片的影响。如下图:

https://img1.sycdn.imooc.com//5c97d20d0001906e05590160.jpg

    所以我感觉是你看错了。

    好好琢磨透“只与父级有关系”这个还是很不错的。

    以上为个人学习后的理解,如有错误,Emmm,哈哈哈哈哈,快来教懂我吧。

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么图片会影响文字?这和定义不符合

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信