码迷,mamicode.com
首页 > Web开发 > 详细

使用CSS设置行间距,字间距

时间:2014-10-29 19:48:38      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:html、首行缩进、行间距、字间距

字间距
1、text-indent设置抬头距离css缩进

    即对应div设置css样式text-indent : 20px; 缩进了20px。

    text-indent : 2em;即缩进了2个字体大小的距离。

2、letter-spacing来设置字与字间距_字符间距离,字体间距css样式

    即对对应div设置css属性样式为letter-spacing:8px;,字间距为8px

行间距

在CSS中,可以设置行间距,格式如下:
标签名{line-height:参数}

根据参数不同有3种方法:
1.用数字参数设置:
   行间距=字号×参数
2.用单位参数设置:
   行间距=参数
3.用比例参数设置:
   行间距=字号×参数

bubuko.com,布布扣

实例:

1.用数字参数设置:

 程序代码


<html>
<style type="text/css">
<!--
    body{font-size:12pt;line-height:3}
    
-->
</style>
<head>
     <title>CSS</title>
</head>
<body>
     Welcome to Magci‘s BLOG!<br>
     Welcome to Magci‘s BLOG!<br>
     Welcome to Magci‘s BLOG!
</body>
</html>



2.用单位参数设置:

bubuko.com,布布扣 程序代码


<html>
<style type="text/css">
<!--
    body{font-size:12pt;line-height:3pt}
    
-->
</style>
<head>
     <title>CSS</title>
</head>
<body>
     Welcome to Magci‘s BLOG!<br>
     Welcome to Magci‘s BLOG!<br>
     Welcome to Magci‘s BLOG!
</body>
</html>


3.用比例参数设置:

bubuko.com,布布扣 程序代码


<html>
<style type="text/css">
<!--
    body{font-size:12pt;line-height:200%}
    
-->
</style>
<head>
     <title>CSS</title>
</head>
<body>
     Welcome to Magci‘s BLOG!<br>
     Welcome to Magci‘s BLOG!<br>
     Welcome to Magci‘s BLOG!
</body>
</html>


使用CSS设置行间距,字间距

标签:html、首行缩进、行间距、字间距

原文地址:http://7058956.blog.51cto.com/7048956/1569125

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!