スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



  

CSSで行間を空ける方法

第1回 サトリヒロシのCSS講座
今回はCSSで行間を空ける方法です。
やり方は簡単!
行間を空けたい箇所に
line-height:XXem;(XXには数値を入れる)
と指定するだけです。


<span style="line-height:1em;">指定なし</span>
<span style="line-height:1em;">指定なし</span>
<span style="line-height:2em;">指定あり</span>
<span style="line-height:2em;">指定あり</span>

このブログはもともとline-heightが指定してあるので
普通の記事ではきちんとノートの罫線に沿って文字が並びますが
line-height:1emと書くことで指定してある行間をなくすことができます。

そもそもline-heightとは行の高さを指定するものなのです。
つまり、line-heightで指定した値から文字の大きさを引いた値が上下均等に行間として割り振られるのです。
なのでline-height:1emと指定すると、
line-height:1em - 文字の大きさ:1em = 0em
になるため、行間がなくなったというわけです。
もちろんemの部分はpxや%などでも問題ありません。
これで。読みやすい文章が作れるようになりましたね!

以上で第1回 サトリヒロシのCSS講座を終了します。
ご質問は気軽にコメント欄へどうぞ!

次回は文字を自動に横移動させる方法です。
関連記事
スポンサーサイト



  

テーマ : WEBデザイン
ジャンル : コンピュータ

コメント

非公開コメント

検索フォーム
プロフィール

サトリヒロシ

Author:サトリヒロシ
ビジネスを重視した企画を支援したいエンジニアが、何かを書こうとするブログです。

サトリ潜伏先
サトリ倉庫

WEB関連の技術で調査リクエストがあればご連絡ください。

カレンダー
06 | 2017/07 | 08
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
カテゴリ
最新記事
最新コメント
最新トラックバック
月別アーカイブ
RSSリンクの表示
リンク
QRコード
QRコード
FC2カウンター
スポンサードリンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。