Rumah > hujung hadapan web > tutorial css > css中text-indent 用法及与padding 的区别详解

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

零下一度
Lepaskan: 2017-06-19 14:46:55
asal
2599 orang telah melayarinya

语法: 
text-indent : length 
 
参数: 
 
length :  百分比数字|由浮点数字和单位标识符组成的长度值,允许为负值。请参阅长度单位 
 
说明: 
 
检索或设置对象中的文本的缩进。
在被另一个对象(如)断开的对象内不能应用本属性。 
对应的脚本特性为textIndent。请参阅我编写的其他书目。 
 
示例: 

div { text-indent : -5px; } 
div { text-indent : underline 10%; }
Salin selepas log masuk

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内部,因此所有文字都会左移。
作为一个inline-block层级的标签,它是固定单行显示的(而且还和white-space机制不一样),上面所述区别并不存在。
那么区别在哪里呢:
  1、text-indent基于行内排版,导致应用了direction: rtl之后,text-indent提供的indent出现在右侧;padding-left则不受direction影响。
  当然,direction这个属性不常用于
  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的相应样式:


Atas ialah kandungan terperinci css中text-indent 用法及与padding 的区别详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan