关于css的text-indent首行缩进两个字符和图片缩进的问题
段落前面空两个字的距离,不要再使用空格了。应该使用首行缩进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首行缩进两个字符和图片缩进的问题的更多相关文章
- div+CSS实现段落首行缩进两个字符
段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...
- Div+Css实现段落首行缩进两个字符(text-indent标签)
段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...
- Unity中Text中首行缩进两个字符和换行的代码
1.首行缩进两个字符 txt.text=“\u3000\u3000” + str: 2.首行缩进两个字符 将输入法换成全角的,在Text属性面板中添加空格即可. 3.换行 “\n” 补充 Uni ...
- 使 Word 段落第一行空出两个字符的位置(段落首行缩进)
描述 使 Word 段落第一行左突出两个字符的位置,即段落首行缩进的方式有两种. "视图"选项卡--"显示"组--标尺 "开始"选项卡--& ...
- 用CSS定义每段首行缩进2个字符 转
应该遵循w3c所制定的html/xhtml标准来使用tag和编写网页.如果你对此不太了解,可以到w3c的网站www.w3.org去找相关资料,或者买一本xhtml的书(注意不要买过时的html的书,尽 ...
- html文本标准模式,首行空两格,两端对齐,行高
font-size: 13px; line-height: 1.6; text-align: justify; text-indent: 2em;
- 输出文章段落首行空格缩进在IE和chrome显示不一致的问题
一般的编辑文章时,首行都缩进两格,而执行的操作则是一个tab键或者四个空格键,在html代码中体现的往往都是4个 然而我在输出时却发现了同样的html代码,在IE上显示的是缩进了一个字符,在chrom ...
- markdown首行缩进
首行缩进两个字符:(每个表示一个空格,连续使用两个即可) 半角的空格 全角的空格
- HTML学习笔记 CSS文本及字体及连接及列表(a标签使用及缩进) 案例 第七节 (原创)参考使用表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Linux以字节显示内存大小
Linux以字节显示内存大小 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ free -b total used free shared buffers ca ...
- Flex设置LinkButton的背景色
1.设计思路 由于Flex中没有设置LinkButton的背景色的属性,现在得从两个方面入手:第一,直接通过调用样式方法画出LinkButton的背景色:第二,设置LinkButton的背景图片 ...
- CentOS中对ext4文件系统做磁盘配额
1.修改/etc/fstab文件,使ext4文件系统支持磁盘配额. UUID="9e6dc1e8-4fc1-4984-be38-524573572d41" /mnt/ext ext ...
- Linux之磁盘与文件系统管理
磁盘及文件系统管理详解 [参考文献:马哥视频] 原文:http://blog.csdn.net/u013008795/article/details/51150075 目前市场上主流的磁盘是机械式硬盘 ...
- 神级程序员:让你的爬虫就像人类的用户行为! 你敢封我IP吗?
1 前言 近期,有些朋友问我一些关于如何应对反爬虫的问题.由于好多朋友都在问,因此决定写一篇此类的博客.把我知道的一些方法,分享给大家.博主属于小菜级别,玩爬虫也完全是处于兴趣爱好,如有不足之处,还望 ...
- 【Luogu3041】视频游戏的连击(AC自动机,动态规划)
题面链接 题解 首先构建出AC自动机 然后在AC自动机上面跑DP 转移很显然从Trie树的节点跳到他的儿子节点 但是要注意一个问题, 在计算的时候,每一个节点加入后能够 造成的贡献 要加上他的子串的贡 ...
- Bzoj3160:万径人踪灭
题面 Bzoj Sol 求不连续回文子序列的个数 \(ans=\)回文子序列个数-连续回文子序列个数 即回文子序列个数-回文子串个数 后面直接\(Manacher\)就好了 考虑前面的 枚举对称轴,设 ...
- 实战绕过某医院的waf
最近遇到一个注入,我们直接来看吧.还是常规的单引号: 是一个很常规的注入.我们来尝试下获取一些信息: 然后发现是有防火墙的,安全狗.安全狗有很多针对php+mysql的绕过方法,比如这样:/*!uni ...
- 重磅消息-Service Fabric 正式开源
微软的Azure Service Fabric的官方博客在2017.3.24日发布了一篇博客 Service Fabric .NET SDK goes open source ,介绍了社区呼声最高的S ...
- 分布式架构设计(一) --- 面向服务的体系架构 SOA
1.1 基于TCP协议的RPC 1.1.1 RPC名词解释 RPC的全称是Remote Process Call,即远程过程调用,RPC的实现包括客户端和服务端,即服务调用方和服务提供方.服务调用方发 ...