行内元素垂直方向位置调整的一些感悟和困惑

如图有两个行内元素的并排排列,但是右侧的图标太靠上了,于是想给往下调一下,觉得用定位的方式来做有点小题大作了,于是决定用display:inline-block属性配合margin的相关属性来解决

于是给后面的<span></span>标签加上display:inline-block属性,然后给了margin-top,结果发现,压根不起作用,margin-top的值设置大了左侧的文字也会被顶下去

这时候我给右侧设置了一个margin-bottom:-10px居然成功了

然后我就困惑了,margin-bottom不是应该会把后面的元素给拉活来,覆盖在自己身上吗,难道是我理解错了???于是接着做了一些实验,对比之后才知道,原来我是给父级(文字和右侧图标的父级)加上了line-height属性,实验之后发现了一个有趣的现象:当给父级加上line-height属性之后再在子元素(block或者inline-bolck的子元素),子元素的margin-bottom如果为负值会把自己给拉下去,一时有点头晕了,问题先留着,以后研究——8、26

原文地址:https://www.cnblogs.com/wangrongxiang/p/5810731.html