zoukankan      html  css  js  c++  java
  • 行内元素垂直方向位置调整的一些感悟和困惑

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

  • 相关阅读:
    接口测试
    jmeter直连数据库
    登录功能的测试用例设计
    oracle 同义词synonym
    oracle常用函数
    python环境搭建--pycharm的安装及使用
    JavaScript数组函数
    JavaScript:var、let、作用域
    HTML入门到精通(带你全面避坑)
    使用VirtualBox安装CentOS7
  • 原文地址:https://www.cnblogs.com/wangrongxiang/p/5810731.html
Copyright © 2011-2022 走看看