ホームへ

【html/CSS】imgやaタグなどインライン要素をブロック要素に変える方法

「aタグをブロック要素にしてクリック範囲を広げたい!」

「spanにwidthを指定するためにブロック要素にしたい!」

imgやaタグなどインライン要素をブロック要素に変える方法を解説します。

【結論】display:blockを指定する

display:blockを指定するとインライン要素をブロック要素に変えることができます。

display:blockを指定した場合

aタグ span
<style>
.example>*{
    /*コレ*/display: block;
}
</style>
<div class="example">
    <img width="200" src="cat.jpg" alt="">
    <a href="#">aタグ</a>
    <span>span</span>
</div>

何もしていない状態

aタグ span
<div>
    <img width="200" src="cat.jpg" alt="">
    <a href="#">aタグ</a>
    <span>span</span>
</div>

インライン要素はふつうに横に並びますが、display:blockを指定してブロック要素にしたことで縦並びになります。

CSS displayについて詳しくはこちら↓

display:blockを指定するメリット・理由

【インライン要素全般】widthなどのCSSが効くようになる

下記はインライン要素とブロック要素で効くCSS、効かないCSSの表です。

インライン要素 ブロック要素
width ×
height ×
margin-top,bottom ×
margin-left,right
(autoは×)
padding
(上下に重なる)
background
border

インライン要素ではwidthやmarginなどよく使うCSSが効きません。

display:blockを指定してブロック要素にすると効くようになります。

【aタグ】クリック範囲が広がる

aタグをブロック要素にするとwidthを指定できるようになります。これによりaタグの範囲を任意に広げることができ、同時にクリック範囲を広げることができます。

インラインのaタグ ブロックのaタグ
<style>
.example2{
    border: 1px solid #333;
    padding: 20px;
    background: #e3f2d9;
    margin: 20px;
    width: 300px;
}
</style>
<a href="#" class="example2">インラインのaタグ</a>
<a href="#" class="example2" style="display: block;">ブロックのaタグ</a>

上記「インラインのaタグ」にもpaddingを指定し、クリック範囲は広がっていますが、paddingの上下がうまく効いていないため、クリック範囲を広げるにはやはりdisplay:blockを指定しましょう。

【img】下の空白を消せる

imgの下には空白があり、これが邪魔になるときがあります。

そんなときはimgにdisplay:blockを指定すると下の空白を消せます。

下記は親要素にborderを指定して、imgと同じサイズにしようとした例です。

↑インラインのimg

↓ブロックのimg

<style>
.example3{
    border: 1px solid #333;
    width: fit-content;
}
</style>
<div class="example3"><img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""></div>
<p>↑インラインのimg</p>
<p>↓ブロックのimg</p>
<div class="example3"><img width="200" src="https://csshtml.work/wp-content/uploads/cat.jpg" alt="" style="display: block;"></div>

display:blockを指定するデメリット

ブロックかインラインかで効くCSSが変わる

例えばインライン要素を中央寄せするには、親要素に「text-align:center」を指定しますが、ブロック要素を中央寄せするには、自身に「margin:auto」を指定します。

このようにブロックかインラインかで効くCSSが変わるため、ブロック要素とインライン要素をしっかり理解しないと崩れの原因になります。

【まとめ】インライン要素をブロック要素に変える方法

【結論】display:blockを指定する


display:blockを指定するメリット・理由

  • 【インライン要素全般】widthなどのCSSが効くようになる
  • 【aタグ】クリック範囲が広がる
  • 【img】下の空白を消せる


display:blockを指定するデメリット
ブロックかインラインかで効くCSSが変わる→インライン要素とブロック要素をしっかり理解しよう

以上、imgやaタグなどインライン要素をブロック要素に変える方法でした。

マンガで読める関連記事