css系列-间隔与间距实例

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>间隔与间距实例</title>
  <style type="text/css">
  p.wordspacing{word-spacing:20px;}
/*  设置空格的长度*/
  p.letterspacing{letter-spacing:20px;}
/*  设置字间距*/
  p.lineheight{line-height:0.3;}
/*  设置行间距*/
  p.whitespace_normal{white-space:normal;}
/*  默认,忽略多个空格为1个,忽略回车符*/
  p.whitespace_pre{white-space:pre;}
/*  保留多个空格*/
  p.whitespace_nowrap{white-space:nowrap;}
/*  忽略回车符,禁止换行,直到遇到br*/
  p.whitespace_prewrap{white-space:pre-wrap;}
/*  保留所有空格符与回车符*/
  p.whitespace_preline{white-space:pre-line;}
/*  忽略多个空格为1个,保留回车*/
  </style>
 </head>
 <body>
  <p class="wordspacing">控 制 空 格 的 长 度</p>
  <p class="letterspacing">控制相邻两个字的间距</p>
  <p class="lineheight">使用百分比控制行间距</p>
  <p class="lineheight">使用像素值控制行间距</p>
  <p class="lineheight">使用数值(如1.2)控制行间距</p>
  <p class="whitespace_normal">空白符的默认处理,浏览器会忽略连续的多个空白符									为1个</p>
  <p class="whitespace_pre">空白符的pre处理,浏览器会保留      多个空白符,与pre标签相似</p>
  <p class="whitespace_nowrap">空白符的nowarp处理,浏览器会忽略
回车符直到遇到br<br />br之后的内容</p>
  <p class="whitespace_prewrap">保留多个    空白符,保留
回车符</p>
 <p class="whitespace_preline">忽略多个    空白符,保留
回车符</p>
  
 </body>
</html>

  

posted @ 2015-08-02 21:34  ICupid  阅读(2952)  评论(0编辑  收藏  举报