CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの文字間隔プロパティを使用して文字間にスペースを設定する

CSSの文字間隔プロパティを使用して、テキストの文字間のスペースの量を指定できます。

例

次の例は、CSSの文字間隔プロパティを示しています。

<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type {
   margin: 3%;
   padding: 3%;
   background-color: seagreen;
   color: white;
   letter-spacing: 2em;
   font-size: 2em;
   text-align: center;
}
</style>
</head>
<body>
<p>BOOM</p>
<p>BOOM</p>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSの文字間隔プロパティを使用して文字間にスペースを設定する

例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   margin: 3%;
   padding: 3%;
   border: 23px ridge navy;
}
p {
   margin: 3%;
   background-color: navajowhite;
   letter-spacing: 12px;
   font-size: 1.2em;
   text-align: center;
}
</style>
</head>
<body>
<div>
<p>BOOM</p>
<p>abcdefghijklmnop-qrstuvwxyz</p>
</div>
</body>
</html>

出力

これにより、次の結果が生成されます-

CSSの文字間隔プロパティを使用して文字間にスペースを設定する


  1. CSStab-sizeプロパティを使用したHTMLでのタブサイズの設定

    CSSタブサイズプロパティ タブで使用される空白の量を設定できます。次の例は、CSSのtab-sizeプロパティを示しています。 例 <!DOCTYPE html> <html> <head> <style> body {    display: flex;    flex-direction: column; } p {    white-space: pre; } p:last-of-type {    tab-size: 32;    -mo

  2. CSSwordspacingプロパティを使用した単語間の間隔の管理

    CSSのword-spacingプロパティを定義することで、単語間の空白の量を設定できます。 次の例は、CSSの単語間隔プロパティを示しています。 例 <!DOCTYPE html> <html> <head> <style> div {    margin: 2%;    padding: 2%;    background-color: mediumorchid;    color: ivory;    word-spacing: 2.2cm