开发网页时,涉及到一段甚至多段文字的部分经常会把它设置为首行缩进 ​2​ 个字符,以优化页面,增强用户体验。那么这篇文章 W3Cschool 小编教你 CSS 如何设置首行缩进 。

text-indent:设置文本块(块级元素)中首行文本缩进。通过​length​和​%​的属性值来设置首行缩进。还有另一种方式进行缩进,那就是​em​。em 是一种相对长度单位,也就是当前对象内的字体尺寸。如首行缩进两个字符也就是 2em。我们来看下三种方式的实现效果:

相关代码:

首行缩进 - 编程狮(w3cschool.cn)

.demo{

width: 400px;

height: 200px;

}

.one{

text-indent:36px;

}

.two{

text-indent:10%;

}

.three{

text-indent:2em;

}

以盒子宽400px,高200px为例:

这是一段text-indent:36px的测试代码,让我们来看一下缩进效果如何。

这是一段text-indent:10%的测试代码,让我们来看一下缩进效果如何。

这是一段text-indent:2em的测试代码,让我们来看一下缩进效果如何。

以上就是 CSS 如何设置首行缩进的全部内容。

html怎么编辑首行缩进,CSS如何设置首行缩进?相关推荐

  1. html5设置字体首行缩进,科技常识:css如何设置首行文字缩进

    今天小编跟大家讲解下有关css如何设置首行文字缩进 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css如何设置首行文字缩进 的相关资料,希望小伙伴们看了有所帮助. 在html网页中通常一 ...

  2. word整个表格首行缩进_Word2016中设置首行缩进的方法

    缩进决定了段落到左右页边距的距离.在Word 2016中,可以使用首行缩进.左缩进.右缩进和悬挂缩进来设置段落的缩进方式.本文介绍了Word2016中设置首行缩进的方法. 默认输入的文档内容都是顶行输 ...

  3. html中怎么设置首行缩进2字符,css怎么设置首行缩进2字符?

    CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力. css通过text-indent属性控制首行缩进两个字符: p {text-in ...

  4. css中设置首行文本缩进的属性是,css如何设置首行文字缩进?

    在HTML网页中通常一段文字都需要设置首行缩进两个文字,使页面更加美观,我们可以通过css实现这一效果,下面我们就来看一下使用css设置首行文字缩进的方法. css可以使用text-indent属性来 ...

  5. html文字段落缩进,CSS text-indent段落首行文字缩进分享

    DIV CSS text-indent段落首行文字缩进,CSS段首缩进,可控制缩进距离样式教程篇 让每个段落首行开头文字缩进,如缩进2个文字距离样式,我将用到text-indent属性样式. .div ...

  6. html首行缩进语言,css如何设置首行缩进2字符?

    用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位. 在这里我们需要了解一种长度单位em.em是相对长度单位.相对于当前对象内 ...

  7. 首html行缩进2字符怎么设置,css如何设置首行缩进2个字符

    css设置首行缩进2个字符的方法:可以利用text-indent属性来设置首行缩进2个字符,如[text-indent:2em;].text-index属性用于规定文本块中首行文本的缩进,em是相对单 ...

  8. css如何设置首行文字缩进?

    在html网页中通常一段文字都需要设置首行缩进两个文字,使页面更加美观,我们可以通过css实现这一效果,下面我们就来看一下使用css设置首行文字缩进的方法. css可以使用text-indent属性来 ...

  9. html中怎样设置缩进,html如何设置首行缩进

    在HTML中,可以使用text-indent属性设置首行缩进,只需要给文本元素设置"text-indent:缩进值"即可.text-indent 属性规定文本块中首行文本的缩进:允 ...

最新文章

  1. 黑客带来了病毒攻击软件还是文化?
  2. 顺序表的应用——逆置问题
  3. 玩转算法面试-第二章
  4. 302状态码_HTTP协议详解(基础概念 方法 状态码 首部 连接 Cookie 新特性 安全)
  5. html5音乐播放器设计论文,基于微信小程序的音乐播放器设计和毕业论文
  6. Qt Quick QMl学习笔记 之图片浏览器
  7. LSTM神经网络输入输出究竟是怎样的?
  8. JavaScript模块知识理解
  9. R|广义线性模型知识点归纳
  10. 以太网芯片MAC和PHY的关系
  11. 转载:欧姆社 漫画学习统计学
  12. Android中获取屏幕信息的几种方式
  13. 【操作系统】第一章 概论 冲鸭!!
  14. Windows 10电脑使用VMware虚拟机安装macOS苹果系统[一站式保姆级别教程]
  15. PFC的使用与探索(一)
  16. 自定义返回上一步idea快捷键
  17. bzoj1911【APIO2010】特别行动队
  18. 【IoT】内容运营 | 获得更多评论的 8 种策略
  19. u-boot scsi sata源码解析
  20. abaqus python_ABAQUS中的python语言入门

热门文章

  1. ORACLE之rman备份恢复及故障处理
  2. Elasticsearch5.2.2进行数据聚合测试
  3. opencv-python合成模糊图像
  4. 关于剪报插件在新版本Chrome浏览器下不能使用的解决方案
  5. web前端——页面设计
  6. Sublime SystemVerilog安装
  7. 水仙花数(daffodil)
  8. C#+AE 栅格裁剪
  9. 比亚乔劲霸80技术参数
  10. 用python实现龙贝格算法