今回は【CSS】marginが効かない? ブロック要素とインライン要素とは
についての解説になります!
こんな方に読んでほしい
- CSSを学び始めた方へ
-
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に関する様々な情報を発信しています。
最新記事
関連記事