SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.06.06
  • CATEGORY
TITLE

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

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

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

こんな方に読んでほしい

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

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

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に関する記事

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

まとめ

今回はこれで以上になります。

この記事では、ブロックレベル要素、インライン要素の役割について書かせていただきました。

POINT ブロックレベル要素
  • margin、paddingを上下左右に指定できます。
  • width、height、margin、padding、borderを指定できます。
POINT インライン要素
  • marginは左右に指定できます、上下は指定できません。
  • paddingは上下左右に指定できます。
  • width、heightを指定できません。
  • ※一部のタグ<img>、<input>は、width、height、margin(上下)の指定が可能です。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top