使用CSS設定行間距,字間距.

來源:互聯網
上載者:User

標籤:字元   使用   href   images   image   執行個體   let   格式   div   

字間距
1、text-indent設定抬頭距離css縮排

即對,對應div設定css樣式text-indent : 20px; 縮排了20px

2、letter-spacing來設定字與字間距_字元間距離,字型間距css樣式

即對對應div設定css屬性樣式為letter-spacing:8px;,字間距為8px

行間距

在CSS中,可以設定行間距,格式如下:
標籤名{line-height:參數}

根據參數不同有3種方法:
1.用數字參數設定:
   行間距=字型大小×參數
2.用單位參數設定:
   行間距=參數
3.用比例參數設定:
   行間距=字型大小×參數

執行個體:

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.用單位參數設定:

 程式碼
<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.用比例參數設定:

 程式碼
<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設定行間距,字間距.

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.