スキルアップを始める!

【CSS】インライン要素とpaddingについて(上下の余白が効かない…?)

CSS(シー・エス・エス)
この記事は約4分で読めます。

※記事中に広告情報を含みます。

\ワードプレスのスキルアップはこちら!/ WordPress入門読本

インライン要素にpaddingを設定する際には注意が必要です。

インライン要素とは?

インライン要素とは、HTMLで文章を構成するときに使われる要素のことを指します。インライン要素は、文章の中に含まれる要素であり、通常のブロックレベル要素とは異なり、水平方向に隣接する要素と共に表示されます。

spanタグなどのタグはインラインとなります。

<span>ビデオを使うと、</span><span>伝えたい内容を明確に表現できます。</span>

ブロック要素(divタグなど)の場合はコンテンツ幅まで要素が広がるので、改行されます。

<div>ビデオを使うと、</div><div>伝えたい内容を明確に表現できます。</div>

paddingとは?

paddingは、要素内にある余白のことを指します。要素内のpaddingは、内容と周りの余白を表すプロパティであり、内容を囲むフレームの中にあるものです。

paddingは、要素の境界から内容までの距離を表すプロパティであり、CSSでは、上下左右のpaddingを個別に設定することができます。

例えば、<div>要素に対してpadding-top: 10px;と指定すると、上部に10ピクセル分の余白が設定されます。

インライン要素とpaddingについて

インライン要素にpaddingが効くのかどうか?

[rml_read_more]

試したところ、インライン要素にpaddingは効いたり効かなかったりで注意が必要です。

例えば、下記のような値を設定してみます。

<span>ビデオを使うと、</span><span>伝えたい内容を明確に表現できます。</span>
<style>
span{padding:20px;}
</style>

paddingが左右だけ効いている…?

左右はpaddingが効いているように見えますが、上下のpaddingは無視されているように見えます。

「インライン」要素のHTMLタグ一覧

HTMLのインライン要素は色々とあります。

<a>
<abbr>
<acronym>
<audio>
<b>
<bdi>
<bdo>
<big>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<del>
<dfn>
<em>
<embed>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<map>
<mark>
<meter>
<noscript>
<object>
<output>
<picture>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<template>
<textarea>
<time>
<u>
<tt>
<var>
<video>
<wbr>

まとめ

もしインライン要素に上下のpaddingを指定したい場合は、displayプロパティでinline-blockやblockに変更するなどすれば、paddingの指定が可能となります。

続きについては、また。

URLをコピーしました!