段落前面空两个字的距离,不要再使用空格了。应该使用首行缩进text-indent。

text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。

<style type="text/css">

p{

text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/

}

</style>

注:div标签不要忘记起始符。text-indent只对p或div标签有效,对br标签不生效,原因是br标签是换行标签不是分段标签。

用CSS实现段落首缩进两个字符,实现首行缩进的通用方法是加四个小角空格。

在style里定义如下缩进样式:.suojin{text-indent:2em}

在需要缩进的地方使用class="suojin"即可,比如用一个div定义一整块段落首先缩进,

凡在div区域里,浏览器一碰上p语句(即一个新段的开始),就会执行.suojin所定义的缩进。

也可以在正文中使用嵌入式CSS样式来定义,下面举个实例(使用时请将尖括号改为小角尖括号):

<div style="text-indent:2em">

<p>段落一</p>

<p>段落二</p>

<p>段落三<p>

</div>

可加了这个缩进后当遇到正文内容中有独立段落的图片时,图片也会被缩进,这样会很影响排版。而且对于缩进后的图片大小也不好把握,对于自适应主题尤其如此。所以很多人因为搞不定图片这个问题最后放弃了使用段落首行缩进。

其实text-indent有个很奇怪的属性,就是其内部元素遇到float或者display: block后就不继承外部这个缩进的属性了,也就是说,只要给图片加上float或者display: block的 CSS 属性后,图片的缩进会自动失效。

但是为了排版的效果,一般都使用display:block;,这样图片就不会与文字并排,图片单独占一行。

关于css的text-indent首行缩进两个字符和图片缩进的问题的更多相关文章

  1. div+CSS实现段落首行缩进两个字符

    段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...

  2. Div+Css实现段落首行缩进两个字符(text-indent标签)

    段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...

  3. Unity中Text中首行缩进两个字符和换行的代码

    1.首行缩进两个字符 txt.text=“\u3000\u3000” + str: 2.首行缩进两个字符 将输入法换成全角的,在Text属性面板中添加空格即可. 3.换行    “\n” 补充 Uni ...

  4. 使 Word 段落第一行空出两个字符的位置(段落首行缩进)

    描述 使 Word 段落第一行左突出两个字符的位置,即段落首行缩进的方式有两种. "视图"选项卡--"显示"组--标尺 "开始"选项卡--& ...

  5. 用CSS定义每段首行缩进2个字符 转

    应该遵循w3c所制定的html/xhtml标准来使用tag和编写网页.如果你对此不太了解,可以到w3c的网站www.w3.org去找相关资料,或者买一本xhtml的书(注意不要买过时的html的书,尽 ...

  6. html文本标准模式,首行空两格,两端对齐,行高

    font-size: 13px; line-height: 1.6; text-align: justify; text-indent: 2em;

  7. 输出文章段落首行空格缩进在IE和chrome显示不一致的问题

    一般的编辑文章时,首行都缩进两格,而执行的操作则是一个tab键或者四个空格键,在html代码中体现的往往都是4个 然而我在输出时却发现了同样的html代码,在IE上显示的是缩进了一个字符,在chrom ...

  8. markdown首行缩进

    首行缩进两个字符:(每个表示一个空格,连续使用两个即可)   半角的空格  全角的空格

  9. HTML学习笔记 CSS文本及字体及连接及列表(a标签使用及缩进) 案例 第七节 (原创)参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. ATA接口寄存器描述

    ATA接口寄存器描述 .ATA接口的三种数据传输方式 位. )MDMA(Multiword DMA)传输,用于数据传输.ATA主机控制器向ATA设备下达MDMA传输命令后,等待设备向主机发送DMARQ ...

  2. Red Hat Enterprise Linux 6 “桌面”、“工作站”、“服务器” 版本差异比较

    Red Hat Enterprise Linux 6,共有三个版本.通过安装发现,所谓的"桌面"."工作站"."服务器"这三个版本的区别就在 ...

  3. 事件驱动的Java框架

    事件驱动的三个要素: 事件源:能够接收外部事件的源体. 侦听器:能够接收事件源通知的对象. 事件处理程序:用于处理事件的对象.

  4. iOS - IM 即时通讯

    1.即时通讯技术 即时通讯(IM:Instant Messaging):又称实时通讯,支持用户在线实时交谈,允许两人或多人使用网络实时的传递文字消息.文件.语音与视频交流. 即时通讯在开发中使用的场景 ...

  5. 复制粘贴之插件(jquery.zclip.min.js)需要安装flash

    .line{margin-bottom:20px;} /* 复制提示 */ .copy-tips{position:fixed;z-index:999;bottom:50%;left:50%;marg ...

  6. 初识lucene(想看代码的跳过)

    最早是在百度贴吧里看到的lucene这个名称,只知道跟搜索引擎有关,因为工作中一直以来没有类似的需求,所以没有花时间学习这方面的知识. 刚过完年,公司不忙,自己闲不住把<Netty权威指南> ...

  7. Dynamics 365 Online-60000 API Limits

    最近,Dynamics 365官方文档有最新的发布,就是从2018.3.19开始,会对API请求的数目有个限制:在连续的5分钟里,一个连接用户,针对一个CRM Organization,API请求数不 ...

  8. C#多线程编程(3)--开启子任务

    上一篇我讲解了await和async关键字,这两个关键字的作用是将async限定的方法中await关键字后面的部分封装成一个委托,该委托会在await修饰的Task完成后再执行.简单的说,就是等待任务 ...

  9. [BZOJ1002] [FJOI2007] 轮状病毒 (数学)

    Description 给定n(N<=100),编程计算有多少个不同的n轮状病毒. Input 第一行有1个正整数n. Output 将编程计算出的不同的n轮状病毒数输出 Sample Inpu ...

  10. JavaScript中的私有成员[翻译]

    原作者:Douglas Crockford,原文地址:http://www.crockford.com/javascript/private.html JavaScript 是世界上被误解最深的编程语 ...