はじめに

inline要素はmarginやpaddingを縦方向に設定できません。

しかし、なんとかinline要素を使いつつ縦方向に余白が欲しかったので、疑似的に余白を作る方法をいくつか考えました。

記述的に正しいかどうかは分かりませんが「一応再現できますよ」という訳で、その方法を紹介します。

（できればhtmlファイルは極力触らず、CSSの調整のみでなんとかしたいですよね）

目次

実際inline要素は縦に余白を作れないのか？

本題に入る前に、本当にinline要素に縦方向の余白は設定できないのか、marginとpaddingをCSSで設定して、試してみました。

marginとpaddingをそれぞれ上下60pxで設定しています。

HTML

<p class="text01">このテキストにはmarginを設定しています。</p>
<p class="text01">このテキストにはmarginを設定しています。</p>
<p class="text01">このテキストにはmarginを設定しています。</p>
<p class="text01">このテキストにはmarginを設定しています。</p>

<p class="text02">このテキストにはpaddingを設定しています。</p>
<p class="text02">このテキストにはpaddingを設定しています。</p>
<p class="text02">このテキストにはpaddingを設定しています。</p>
<p class="text02">このテキストにはpaddingを設定しています。</p>

CSS

.text01 {
  display: inline;
  margin: 60px 0;
}
.text02 {
  display: inline;
  padding: 60px 0;
}

できあがったもの（margin）

できあがったもの（padding）

やはり、というか当然ですが上下方向に余白はできませんでした。

次から、疑似的に余白を作る方法を紹介していきます。

htmlに改行コードを入れる

最初に考え付いたのが、「htmlに改行コード（<br>）を入れる」という方法です。

「改行してスペースを作る」というお手軽な方法ですが、まるで初めてWEBサイトを作った時の対応方法・・・とも言える方法で、とてもではないがオススメできません。

行間を開ける必要があるので、改行コードは2つずつ入れています。

HTML

<p class="text01">祇園精舎の鐘の声<br><br></p>
<p class="text01">諸行無常の響きあり<br><br></p>
<p class="text01">沙羅双樹の花の色<br><br></p>
<p class="text01">盛者必衰の理をあらはす</p>

できあがったもの

「余白を作る」という意味では合っていますが、実際には改行しているだけなのであまり良い方法とは思えません。

さらに、この方法だとhtmlに対して改行コードを1つずつ入力する必要があるので、htmlファイルが複数ある場合は全てにコードを記述する必要があって非常に面倒だと思います。

疑似要素で改行を挿入する

改行コードを1つずつ入れるのは面倒なので「CSSを調整して改行コードが一括で入れられないか」を考えてみました。

CSSを使って改行したい場合、疑似要素に\Aを記述すると改行できます。

1つだけだと改行のみなので、2行分改行して余白を作りたい場合はcontent: '\A\A';というように記述します。

さらに同じ疑似要素内にwhite-space: pre;が必要になります。

white-spaceについて

white-spaceは「要素内のホワイトスペース（余白）をどのように処理するか」が設定できます。

ここでいう余白とは「半角スペース」「Tabスペース」「（Enterによる）改行」があります。

そのほか、「行の折返し（テキストが右端まで来た時に折返すor返さない）」も設定できます。

white-spaceで使用できる値は以下のとおりです。

行の折返しをしない設定があるため一部枠がはみ出ていますが仕様です。

例えばwhite-sapace:normalでは、文字間にどれだけスペース（半角スペース・Tabスペース）があっても「半角スペース1つ分のスペース」で処理されます。

また、初期値（normal）ではhtmlソース内の「Enterによる改行」はブラウザ上には反映されませんが、white-space:preだとソース上の改行がブラウザに反映されます。

今回、「CSSの疑似要素上で改行を挿入し、それをブラウザに反映させる」というような方法になります。

CSS

.text01 {
  display: inline;
}
.text01::after {
  content: '\A\A';
  white-space: pre;
}

できあがったもの

この方法だとCSSの編集のみで対応できるので、該当箇所が複数のファイルに分かれていても一括で適応できます。

もう1つ疑似用を使って余白を作る方法を紹介します。

疑似要素をblock要素にする

疑似要素:afterをblock要素にして高さheightを指定する事で、設定した高さ分だけ下に余白を作る方法です。

疑似要素をblock要素にすることで改行（正確に言うと「行を変える？」）させています。

同様に、:beforeの場合だと上に余白を作ることができます。

CSS

.text {
  display: inline;
.text::after {
  display: block;
  content: '';
  width: 1px; /*任意の数値でOK*/
  height: 1rem; /*余白を空けたい高さ*/
}

できあがったもの

下の例では分かりやすいように赤で背景色を設定しているのですが、背景色を設定しなくても同じように余白を作れます。