css text-indent与padding-left 有什么区别_ThinkCSS
您的位置:首页 > div css问集 > 【 返回上一页

css text-indent与padding-left 有什么区别

css text-indent、css padding-left区别与如何选择?

text-indent是首行缩进,首行后的第二行第三行不会被缩进。

padding-left是左边距,盒子与内容左边距离设置,设置后内容无论首行还是后面二、三以及后面的整个对象左边距离设置。是padding细分。

两者功能作用完全不同,如果是当行文字内容排版设置padding-left与text-indent效果能达到一样内容靠左一定距离,但如果多行后,一个是整个内容靠左一定距离,一个知识首行文字内容缩进多少,所以实际布局时候根据需求灵活选择使用此两个CSS样式。

css text-indent 与 padding-left对比实例代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-indent与padding-left实例</title>
<style>
.exp-a{width:300px;border:2px solid #F00;text-indent:25px}
.exp-b{width:300px;border:2px solid #F00;padding-left:25px}
</style>
</head>
<body>
<div class="exp-a">
设置text-indent首行内容缩进属性<br />
看看只有首行缩进<br />
第二行及以后内容都不会被缩进</div>

<div class="exp-b">
设置padding-left内补白<br />
即盒子左边与内容距离<br />
整个内容或盒子对象将距离盒子靠左一定距离
</div>
</body>
</html>

效果截图

padding-left与text-indent对比实例与分析截图
div css padding-left与text-indent对比实例与分析截图

从实例我们可以看出两个属性本身所达到效果样式是不同的,padding-left是设置对象内左边距与内容(对象)间距,常常用于对象内边距设置;而text-indent针对是首行内容缩进,常常用于段落排版使用。

相关标签: 缩进 左边距
如需转载,请注明文章出处和来源网址:www.thinkcss.com/wenti/1259.shtml

日期:2017-02-12 11:50:51 来源:www.thinkcss.com 作者:div css

热门点击