【HTML】行間を詰める-行間を0にして改行時の隙間(余白)をなくす方法-

Wordで文章を作成する際に「段落設定画面」で行間の指定ができますが、HTMLでも同じような指定をすることが可能です。その「行の間隔を狭くするHTML」を記述します。

当サイトで使用しているテーマをTHETHORからSWELLに変更しました。それに伴いエディターもクラシックエディターからブロックエディターに変更したので、記事の内容を確認、変更しています。

ブロックエディタで行間をゼロにする方法

ブロックエディタで行間を狭くする（ゼロにする）のは、とても簡単です。

タイポグラフィがあるブロック

そのほか、タイポグラフィ内に「行の高さ」項目のあるブロックは、行間の指定可能です。

タイポグラフィがないブロック

HTMLブロックやテーブルブロックなどは、以下のHTMLを記述する方法で行間をゼロにすることが可能です。

HTMLを記述して行間をゼロにする方法

divタグで囲んで行間を指定します。テーブルブロックやカスタムＨＴＭＬなど、divタグで囲めるもののみ有効です。当記事ではクラシックエディタの表（テーブル）内テキストで説明しています。

行間を詰めるHTML

<div style="line-height:1;" >テキスト</div>

　　　※「em」単位を付けない方が簡単です。
　　　※ コピペして使う場合は、すべて半角になっているか確認してください
　　　　（ダブルクォーテーション「”」が全角になっているかもしれません）

以下説明です。

<div style="line-height: 1;">

</div>

行間を詰めるHTMLの実際の例と比較

実際に、line-height: 1;で指定した場合と、line-height: 1em;で指定した場合とで比較してみました。

em;には元となる決まった単位があるようで、その単位を知らずして指定すると意図した設定ができないようです。

値だけを指定する方法では、簡単に意図した書式を設定することができました。

テーマ＆エディター変更に伴い、文字の大きさをptで指定する場合、直接HTMLで書き込む手間が増えるため実用的でなくなったため、px比較に変更しました（SWELLテーマ使用）

ブロックエディタのテーブルブロックでline-heightを指定すると、「 不明な書式をクリア」と表示が出てしまったため、クラシックブロックで表を作成して、比較できるようにしました。

●文字の大きさ 9pt 14pxの場合

●文字の大きさ 14pt 22pxの場合

●文字の大きさ1em

●文字の大きさ2em

まとめ