首页 >web前端 >css教程 > 正文

css中text-indent 用法及与padding 的区别详解

原创2020-10-21 12:26:330491
语法:
text-indent : length

参数:

length :  百分比数字|由浮点数字和单位标识符组成的长度值,允许为负值。请参阅长度单位

说明:

检索或设置对象中的文本的缩进。
在被另一个对象(如)断开的对象内不能应用本属性。
对应的脚本特性为textIndent。请参阅我编写的其他书目。

示例:

div { text-indent : -5px; } 
div { text-indent : underline 10%; }

css中text-indent 怎么用
text-indent
表示文本首行缩进,好比word中的首行缩进
例如:希望一段文字第一行缩进2个汉字,这段文本字体大小为12px,
放到
此处是你的文本
定义如下
p{text-indent:25px;}

css 中 text-indent 与padding 有什么区别?

text-indent不影响元素的最终宽度但是有兼容性问题,padding在主流浏览器IE低版本下影响最终宽度,但在chrome和firefox下不影响宽度,但是可以通过CSS reset解决多浏览器显示不一的问题,使得他们最终都影响宽度。
text-indent和padding的基本区别:
1、padding基于盒模型,适用于inline和block层级的元素
2、text-indent基于行内排版,仅仅适用于block层级的元素,作用于block层级的元素的内部第一行文字
padding会作用于inline框或block框的左侧padding区域,会影响到content-box,而文字子节点会出现在content-box内部,因此所有文字都会左移。
<input type="text">作为一个inline-block层级的标签,它是固定单行显示的(而且还和white-space机制不一样),上面所述区别并不存在。
那么区别在哪里呢:
  1、text-indent基于行内排版,导致应用了direction: rtl之后,text-indent提供的indent出现在右侧;padding-left则不受direction影响。
  当然,direction这个属性不常用于<input type="text">
  2、padding-left基于盒模型,所以box-sizing属性会和padding-left、width属性一同影响到元素的最终宽度;而text-indent则始终不会影响元素的宽度。
  这很重要,因为webkit和firefox的默认样式表里,会设置input元素的box-sizing: border-box,若你同时设置了width和padding-left,会出现webkit/firefox和IE低版本的很大的宽度区别。
  因此,用到padding-left时,需要重置webkit和firefox的相应样式:


以上就是css中text-indent 用法及与padding 的区别详解的详细内容,更多请关注php学习网其它相关文章!

phpStudy Linux 面板(小皮面板)
  • 相关标签:text-indent padding 样式表 css 区别 用法 详解
  • 本文原创发布php学习网,转载请注明出处,感谢您的尊重!
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    php学习网

    认证0级讲师

    推荐视频教程
  • javascript初级视频教程javascript初级视频教程
  • jquery 基础视频教程jquery 基础视频教程
  • 视频教程分类