HTML
CSS

CSSのpadding-leftをcodeタグに与えると1行目のみ適用されてしまう?

More than 1 year has passed since last update.

HTMLの中で特定の文字列がコード(プログラムのソースコードなど)であることを示したいときは、codeというタグを使います。例えば、以下のようなHTMLになるでしょう。

<!DOCTYPE html>
<html>
<head>
<style>
  code {
    font-size: 20px;
    padding-left: 10px;
  }
</style>
</head>
<body>
<code>git pull origin master<br />
git push origin master
</code>
</body>
</html>

上記では、単にcodeタグを使っただけではなく、文字の大きさを少し大きくして、さらに左に余白を10px分指定しています。では、上記のHTMLをブラウザで表示してみます。

css.png

なんと、padding-left指定が最初の行にしか適用されていません。「text-indentが効いているのかな?」と思って、text-indent: 0としてみても、効果なし。これはなぜでしょうか?これは仕様通りなのか、それとも実はブラウザの不具合を見つけてしまったのか・・・?

よくわからなかったので、StackOverflowで聞いてみました。すると、5分もかからずに回答をしてくれた人がいました。

CSS padding-left value of is applied for only the first line - StackOverflow

これ、実はcodeタグだけでなく、例えばspanでも同じことが起きます。

css2.png

これでピンと来た方もいらっしゃるのではないでしょうか?そう、codeタグはインライン要素だったんです。確かに、

<div>そう、<code>code</code>タグはインライン要素だったんです。</div>

というように、codeタグは文章中に入れることもできるのを忘れてました。インライン要素は、その中にbrタグがあったとしても、それを含めて全体で1行なわけで、padding-leftはその1行に対して効くことになり、結果としてbrタグが入っていた場合に「最初の行しか適用されてないぞ」という見た目になった、というわけです。

つまり、「ブロック要素としてcodeタグが振る舞って欲しい」ということを求めていることになるので、display: blockもしくはdisplay: inline-blockを指定することで、padding-leftが全体に適用されるようになります。

css3.png

元々は、preタグとcodeタグを組み合わせて使いたかったのと、本文中にcodeタグを含めることもしたかったので、codeタグのdisplayスタイル定義は「状況に応じてinline, inline-block, blockを使い分ける」ことが必要になる、ということですね。


追記: codeタグをブロック要素にしてしまうのではなく、codeタグの外側にレイアウト用のタグ(preとかblockquoteとかfigureとか)を置いて、それに対してpaddingなどを指定した方が良いかもです(と他の場所で助言をいただきました)。