【CSS】marginが効かない？ブロック要素とインライン要素とは

シュウ

今回は【CSS】marginが効かない？ブロック要素とインライン要素とは
についての解説になります！

こんな方に読んでほしい

CSSを学び始めた方へ
marginの使い方について学びたい方へ
今回はmarginのブロック要素とインライン要素についての記事になります

前回はmarginの相殺についての記事になりましたが、
今回はmarginのブロック要素とインライン要素についての記事になります。

marginの相殺について

【CSS】marginが効かない!marginの相殺とは

marginの相殺とは、要素が前後に並び、そのそれぞれにmarginが設定されているときにおこる現象になります。

[記事の内容]

marginブロックレベル要素とインライン要素

marginの相殺以外にも「上下のmarginが効かない」で困ったことがありませんか。
要素には大きく分けて「ブロックレベル要素」、「インライン要素」の2種類があります。

h1〜h6、pタグのようなブロックレベル要素にはmarginを指定しても問題はありませんが、
spanやaタグといったインライン要素には注意が必要です。

ブロックレベル要素

ブロックレベル要素とは、指定した要素をブロックボックスとして表示します。
ブロックレベル要素の特徴、要素の例は以下になります。

ブロックレベル要素の特徴

要素の前後に改行が入り、次に続く要素はその要素の下に配置されます
margin、paddingを上下左右に指定できます
width、height、margin、padding、borderを指定できます
要素の横幅いっぱいに広がります

pタグは「ブロックレベル要素」になるため、改行が入り、次に続く要素はその要素の下に配置されます。
また、margin、paddingを上下左右に指定できます。

基本、ブロックレベル要素に関してはmarginを指定しても問題はないでしょう。

ブロックレベル要素の例

<div>、<section>、<header>、<footer>、<h1〜h6>、<p>、<ul>、<li>、<form>など

ブロックレベル要素の例

ブロックレベル要素

<div class="area">
	<p class="box-01">ブロックレベル要素</p>
	<p class="box-02">ブロックレベル要素</p>
</div>

.box-01 {
	/*--margin以外 省略--*/
	margin-bottom: 50px;
}
	
.box-02 {
	/*--margin以外 省略--*/
	margin-top: 10px;
}

インライン要素

インライン要素とは、指定した要素をインラインボックスとして表示します。
インラインボックス要素の特徴、要素の例は以下になります。

インライン要素の特徴

要素の改行はされずに、次に続く要素はその要素の横に配置されます
marginは左右に指定できます、上下は指定できません
paddingは上下左右に指定できます
width、heightを指定できません
横幅は中身の長さによって自動的に広がります

上の図のように、インライン要素には、width、height、margin（上下）が指定できません。
指定可能な値は、margin（左右）、padding（上下左右）になります。

インライン要素の例

<span>、<a>、<br>、<img>、<input>など
※一部のタグ<img>、<input>は、width、height、margin(上下)の指定が可能です

インライン要素の例

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

<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;
}

上記のように左右のmarginは効いていますが、上下のmarginは効いていません。
また同様に左右のpaddingは効いていますが、上下のpaddingは他の要素の領域と重なってしまいます。

このように、margin、paddingが効かない原因は、ブロックレベル要素、インライン要素を知らずに指定している可能性があります。

marginに関する記事