行内元素垂直方向位置调整的一些感悟和困惑
2016-08-26 16:00
183 查看
如图有两个行内元素的并排排列,但是右侧的图标太靠上了,于是想给往下调一下,觉得用定位的方式来做有点小题大作了,于是决定用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
相关文章推荐
- 各浏览器对于获取文档水平及垂直方向滚动条位置(scrollLeft、scrollTop)时的参考元素存在差异
- (转)css 相对定位 绝对定位 浮动 CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”
- google map 定位当前位置和根据手机的方向调整在地图的方向
- LinearLayout的gravity属性以及其子元素的layout_gravity何时有效;RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayout中的gravity无法控制!!!
- [置顶] 关于图片与文字在一行显示时,文本的垂直方向位置的设置
- 调整数组使得奇数元素位于偶数元素之前(相对位置不变)
- jQuery获取元素位置以及高度与宽度 动态调整打开新窗口效果
- inline-block 属性的元素水平方向,垂直方向 间隙问题
- 3.1 Javascript:探索客户端-设置网页元素根据窗口比例调整位置与大小
- Android学习的一些困惑和方向
- 特定显示器调整主副屏、方向、位置
- UIView设置为自动适配屏幕时,当用户旋转设备的时候,会调用layoutSubviews方法,我们只需重写 这个方法,然后判断用户屏幕的方向。在调整每个空间的位置即可。
- 浅谈图像处理方向的就业前景 & 心得感悟 & 一些相关期刊
- TreeSet要求加入的所有元素都可以相互比较大小;可以控制比较位置来决定排序方向;hashset只能比较可相等不能比较大小
- echarts中元素位置调整
- Android 程式开发:(七)适应屏幕的方向 —— 7.3重新调整尺寸和位置
- 仅当两个块级元素相邻并且在同一个块级格式化上下文时,它们垂直方向margin会折叠
- 父容器height不确定的情况下,实现子元素垂直方向自适应居中
- leetcode 328 Odd Even Linked List(调整链表使得奇数位置的元素位于偶数位置元素之前)
- img (内联元素) (inline元素) 标签上下左右间隙问题原因及解决方案: 垂直方向间隙和水平方向间隙原因及解决方案: