百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> CSS如何缩进文本?
分享文章到:

CSS如何缩进文本?

发布时间:09/01 来源:未知 浏览: 关键词:
CSS入门教程:CSS想要缩进文本需要运用CSS文本属性ext-indent,该属性可以利便地实现文本缩进。通过运用text-indent属性,所有元素的首先行都可以缩进一个给定的长度,甚至该长度可以是负值。

CSS 文本属性可定义文本的外不雅。

缩进文本

把 Web 页面上的段降的首先行缩进,这是一种最常用的文本格局化结果。 ( 举荐学习:CSS入门教程 )

CSS 供给了 text-indent 属性,该属性可以利便地实现文本缩进。

通过运用 text-indent 属性,所有元素的首先行都可以缩进一个给定的长度,甚至该长度可以是负值。

这个属性最常见的用法是将段降的首行缩进,下面的法则会使所有段降的首行缩进 5 em:

p {text-indent: 5em;}

注意:个别来说,可认为所有块级元素利用 text-indent,但没法将该属性利用于行内元素,图像之类的替代元素上也没法利用 text-indent 属性。不外,要是一个块级元素(比方段降)的首行中有一个图像,它会随该行的其余文本挪移。

提醒:要是想把一个行内元素的首先行“缩进”,可以用左内边距或外边距制造这种结果。

运用负值

text-indent 还可以设定为负值。应用这种技术,可以实现许多有味的结果,比方“吊挂缩进”,即首先行吊挂在元素中余下局部的左边:

p {text-indent: -5em;}

不外在为 text-indent 设定负值时要小心,要是对一个段降设定了负值,那么首行的某些文本可能会超出阅读器窗口的左边界。为了不涌现这种显示题目,倡议针对负缩进再设定一个外边距或一些内边距:

p {text-indent: -5em; padding-left: 5em;}

运用百分比值

text-indent 可以运用所有长度单位,包含百分比值。

百分数要相关于缩进元素父元素的宽度。换句话说,要是将缩进值设定为 20%,所影响元素的首先行会缩进其父元素宽度的 20%。

鄙人例中,缩进值是父元素的 20%,即 100 个像素:

div {width: 500px;}
p {text-indent: 20%;}

this is a paragragh

继承

text-indent 属性可以继承,请考虑如下标志:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}

some text. some text. some text.

this is a paragragh.

以上标志中的段降也会缩进 50 像素,这是由于这个段降继承了 id 为 inner 的 div 元素的缩进值。

以上就是CSS如何缩进文本?的细致内容,更多请关注 百分百源码网 其它相干文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板