シュウ

今回は【CSS】display:inline(インライン)とblock(ブロック)の違い
についての解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ
• displayinline、blockの使い方について学びたい方へ
• inlineとblockの違いについての解説になります。

上の図のように、
inlineは改行されずに、横並びになります。
blockは改行され、ブラウザいっぱいに広がります。

また、inline、blockには他にも特徴がありますので最後まで読んでいただき理解度を深めましょう。

displayについて

displayとは、ボックスの種類を指定します。
今回は2種類の値を覚えましょう、書き方は以下のようになります。

display:inline インラインとは

インラインとは、指定した要素をインラインボックスとして表示します。
書き方は以下のようになります。

/*--インラインボックス--*/
要素 {display: inline;}

インラインボックスの特徴、要素の例は以下になります。

主に文章の一部として用いられる

inlineである、spanタグを並べても改行はされず、要素はその要素の横に配置されます。
横幅は中身の長さ(文字数や大きさ)によって自動的に広がります。

<p>要素には大きく分けて<span>「ブロックレベル」</span>と<span>「インライン」</span>の2種類があります。

p span {background-color: #28d53e;}

幅、高さを指定はできません

幅（width）と高さ（height）を指定できません。

<span>「インライン」</span>

.inline-area01 .inline01 {
	width:200px;　　/*--効かない--*/
	height: 100px; /*--効かない--*/
	background-color: #e8505b;
}

上下左右の余白の調整について

左右のmarginは効きますが、上下のmarginは効きません。
左右のpaddingは効きますが、上下のpaddingは他の要素の領域と重なってしまいます。

<p>要素には大きく分けて<span>「ブロックレベル」、「インライン」</span>の2種類があります。
h1〜h6、pタグのようなブロックレベル要素にはmarginを指定しても問題はありませんが、
spanやaタグといったインライン要素には注意が必要です。
<a href="#">前回の記事かコチラから</a>
</p>

p span {
	padding: 40px 10px;
	margin: 10px;
	
	/*--領域の確認用に背景色を指定--*/
	background-color: rgba(241,241,241,0.1);
	
/*--
内訳
padding-top: 40px
padding-right: 10px
padding-bottom: 40px
padding-left: 10px

margin-top: 10px
margin-right: 10px
margin-bottom: 10px
margin-left: 10px
--*/
}
p a {
	padding: 40px 10px;
	margin: 10px;
}

text-align、vertical-alignの指定について

「text-align」、「vertical-align」の指定は可能になります。
「text-align」、「vertical-align」を指定する際には、親要素に対して指定する必要があります。

<div>
	<span>「インライン」</span>
</div>

/*--親要素--*/
div {text-align: center;}

div span {background-color: #e8505b;}

関する記事

【CSS】text-alignで要素の位置を指定しましょう！

基本的なtext-alignの指定方法についての記事になります。

【CSS】vertical-alignで縦の位置について学ぼう！！

基本的なvertical-alignの指定方法についての記事になります。

inlineからblockに変更

display: inlineからblockに変更も可能です。
display:blockにすることで幅、高さの変更も可能になり、paddingの上下の指定も可能です。

<p>inlineからblock<span>「インラインからブロック」</span></p>

p {
	text-align: center;
}

p span {

	/*--inlineからblockに変更--*/
	display: block;
	background-color: #1fcf51;
	padding: 10px 0;
}

display:block ブロックとは

ブロックとは、指定した要素をブロックボックスとして表示します。
書き方は以下のようになります。

/*--ブロックボックス--*/
要素 {display: block;}

ブロックボックスの特徴、要素の例は以下になります。

要素は縦に並びます

blockである、p要素の前後に改行が入り、次に続く要素はその要素の下に配置されます。
要素の横幅いっぱいに広がります。

<div>
	<p>ブロック01</p>
	<p>ブロック02</p>
</div>

p {
	background-color: #e8505b;
	margin-bottom: 10px;
}

幅、高さを指定はできます

幅（width）と高さ（height）を指定することが可能です。
width: 200px、height: 100pxが適用されております。

<p>ブロック</p>

p {
	width: 200px;
	height: 100px;
	background-color: #e8505b;
}

上下左右の余白の調整について

margin、padding、borderを指定することが可能です。
margin-top: 20px、padding:20pxが適用されております。

<p>ブロック</p>
<p>ブロック</p>

p {
	width: 100px;
	height: 100px;
	padding: 20px;
	background-color: #1ece50;	
}

p + p {margin-top: 20px;}

text-alignやvertical-alignの指定はできません

要素自体は左寄りのままで要素内の文字だけ中央配置になります。
要素自体を中央配置にしたい場合はmargin: -left -rightをそれぞれ「auto」にする必要があります。

<p class="block">ブロック</p>
<p class="margin-auto">中央配置</p>

p.block {
	width: 200px;
	text-align: center;
	margin-bottom: 20px;
	background-color: #e8505b;	
}

p.margin-auto {
	width: 200px;
	
	/*--要素自体を中央配置にしたい場合--*/
	margin: 0 auto;
	text-align: center;
	background-color: #e8505b;
	
	/*--
	内訳
	margin-top: 0px
	margin-right: auto
	margin-bottom: 0px
	margin-left: auto
	--*/	
}

まとめ

今回はこれで以上です。

inlineとblockの違いについての解説しました。
次回は、「inline-block」、「none」についての解説を記事にします。

inline-blockとnone

【CSS】display:inline-blockとnoneの使い方を解説！

display:inline-blockとnoneの使い方について

最新記事

• 

  【CSS】display flex指定方法のまとめを解説

  2024.03.07

• 

  【CSS】背景画像を複数設置について解説!

  2023.12.14

• 

  【CSS】疑似クラス、::afterと::beforeで斜めの背景を解説!!

  2023.06.22

• 

  【CSS】画像の透過について、mix-blend-modeを使ってみよう

  2023.06.01

関連記事

< 前の記事

【CSS】text-decorationでテキストに対して線を引こう！

次の記事 >

【CSS】display:inline-blockとnoneの使い方を解説！