博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
深入理解CSS中的行高
阅读量:7237 次
发布时间:2019-06-29

本文共 529 字,大约阅读时间需要 1 分钟。

1.  基线、底线、顶线

行高
  • 行高指的是文本行的基线间的距离。
  • 基线并不是汉字的下端沿,而是英文字母"x"的下端沿

2.  行距、行高

行距和行高

3.  内容区

内容区
  • 底线和顶线包裹的区域,实际中不一定看得到,但却是存在。

4.  行内框

行内框
  • 行内框只是一个概念,它无法显示出来,但是它又确实存在
  • 它的高度就是行高
  • 在没有其他因素(padding)影响的时候,行内框等于内容区域

5.  行框

行框
  • 行框(line box)。同行内框类似,行框是指本行的一个虚拟的矩形框
  • 行框高度等于本行内所有元素中行高最大的值

元素对行高的影响

  • 对于行内元素如em、strong、span和等,其padding、margin、border-top、border-bottom 不会增加行高。
    padding会覆盖;margin将重置为0;border-top和border-bottom同样会覆盖。
    padding-left、padding-right、border-left和border-right可用。
  • img元素会影响行高
  • 设置行内元素的padding、border和margin并不会撑大外层元素的高度,如下图: 行内元素与行高

扩展阅读

  • ,该文章包括:
    • 浏览器的差别与错误
    • 应用:单行文字在垂直方向居中
  • (强烈推荐)

转载地址:http://eklfm.baihongyu.com/

你可能感兴趣的文章
e.Item.ItemType
查看>>
拖动无边框窗体
查看>>
Python3中的函数 大全
查看>>
BAT大厂面试流程剖析
查看>>
网络流(进阶)
查看>>
Vim使用心得——整体设置
查看>>
请随时告诉自己
查看>>
excel 数字列 转换成 字母列
查看>>
数组转为对象
查看>>
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)...
查看>>
FNV哈希算法
查看>>
Vue 插槽
查看>>
终于解决改键的烦恼
查看>>
成为JavaGC专家(2)—如何监控Java垃圾回收机制
查看>>
从JAVA多线程理解到集群分布式和网络设计的浅析
查看>>
Flexible DEMO 实现手淘H5页面的终端适配
查看>>
前端html
查看>>
配置PHP,Apache
查看>>
redis添加systemctl服务
查看>>
如何获取数据表中自增主键的值
查看>>