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

如图有两个行内元素的并排排列，但是右侧的图标太靠上了，于是想给往下调一下，觉得用定位的方式来做有点小题大作了，于是决定用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