aタグやspanタグなどインライン要素にmarginの上下が効かない！効かせる方法
aタグやspanタグなどのインライン要素に、marginの上下は効きません。
インライン要素をCSSでブロック要素に変えることで、marginが効くようになります。
この記事では、インライン要素にmarginを効かせる方法について書いています。
displayプロパティでブロック要素に変更する
displayプロパティは要素の表示形式を指定するプロパティです。
ブロック要素に指定する値は下記になります。
display:block;
display:inline-block
それではどのような表示になるか、サンプルを見ていきましょう。
aタグをブロック要素に変更してみる
sample01 まずは効かない状態から
まずはmarginが効かない例です。
See the Pen sample01 by natsuki (@natsukimemo) on CodePen.
上の表示のHTMLは、下記のようにpタグをaタグで囲っています。
<a href="#"> <p>texttexttexttext<br> texttexttexttext </p> </a>
そして、CSSでaタグにmargin-top:100px;を指定しています（下記CSS6行目）。
ですが、aタグはインライン要素なので、marginを指定しても効いていません。
*{
margin:0;
padding:0;
}
a {
margin-top:100px;
}
【補足】 CSS1行目～4行目の指定は、全ての要素に共通の指定です。
デフォルトで出来てしまう余白を削除しています。
この記事の主旨とそれるコードなので、これ以降はこのコードは省略して説明していきます。
sample02 display:block;を指定してみる
sample01のCSSにdisplay:block;を追加してみましょう。
他は全てsample01と同じです。
a {
margin-top:100px;
display:block;
}
すると、pタグで囲われたテキストの上に100pxの余白ができました。
これは、aタグにdisplay:block;を指定したことで、インライン要素からブロック要素に変化したため、marginが効くようになりました。
See the Pen sample02 by natsuki (@natsukimemo) on CodePen.
display:block;
要素の表示形式を、ブロック要素にする
sample03 display:inline-blockを指定してみる
inline-blockを指定すると、ブロック要素とインライン要素の性質をあわせ持つことができます。
See the Pen sample03 by natsuki (@natsukimemo) on CodePen.
上の表示のHTMLは、aタグの入れ子になったpタグで囲われたtextの塊が3つです。
CSSで何も指定しなければ、textの塊は縦に並んで表示されます。
<a href="#"> <p>texttexttexttext<br> texttexttexttext </p> </a> <a href="#"> <p>texttexttexttext<br> texttexttexttext </p> </a> <a href="#"> <p>texttexttexttext<br> texttexttexttext </p> </a>
CSSで、aタグにinline-blockを指定しています。
a {
display:inline-block;
border:1px solid #f00;
margin-top:100px;
}
これによって、aタグには下記2点のことが起こっています。
- ブロック要素の性質を持ったため、margin-topが効いて上部に余白が空いている。
- インライン要素の性質を持ったため、横並びになっている。
display:inline-block;
要素の表示形式を、ブロック要素とインライン要素の性質をあわせ持ったものにする
spanタグをブロック要素にしてみる
sample04 まずは効かない状態から
See the Pen sample04 by natsuki (@natsukimemo) on CodePen.
sample04のHTMLはpタグの1行のみです。
pタグ内の「テキスト」をspanタグで囲っています。
<p>texttext<span>テキスト</span>ttexttexttext</p>
CSSでは、spanタグにmarginの左右と上を指定しています。
sample04の表示を見ると、左右のmarginは効いていますが、上のmarginが効いていません。
これはspanタグがインライン要素のため、上下のmarginが効かないのです。
span{
margin-top:100px;
margin-left:50px;
margin-right:50px;
color:red;
}
では、span要素をブロック要素にしてみましょう。
sample05 display:blockを指定してみる
CSSでspanタグにdisplay:block;を指定しました。
他のコードは、sample04と同じです。
See the Pen sample05 by natsuki (@natsukimemo) on CodePen.
すると、spanタグを指定した赤字の「テキスト」の前後で改行が入り、テキスト」の左右の余白だけでなく上部にも100pxの余白がとられています。
これは、spanタグで囲われた赤字の「テキスト」がブロック要素に変わったためです。
span{
margin-top:100px;
margin-left:50px;
margin-right:50px;
color:red;
display:block; /* ←これを追加 */
}
sample06 display:inline-blockを指定してみる
下の表示は、displayプロパティにblockではなく、inline-blockを指定した場合です。
See the Pen sample06 by natsuki (@natsukimemo) on CodePen.
inline-blockは、ブロック要素とインライン要素の性質をあわせ持つため、spanに指定したmarginの左右と上（下記CSS2～4行目）が効いて、各所に余白ができている上に、 横並びで表示されています。
span{
margin-top:100px;
margin-left:50px;
margin-right:50px;
color:red;
display:inline-block; /* ←blockからinline-blockに変更 */
}
まとめ
displayプロパティは、要素の表示形式を指定するプロパティです。
ここで紹介した「block」と「inline-block」以外にも指定できる値があります。
使い方をマスターしていくと、コーディングの幅が広がると思うので、いろいろ検索してみるといいと思います。
この記事がお役に立てるものになっていると嬉しいです。
marginが効かない例については、下記の記事も書いています。よろしければご覧ください。
【番外】WEB制作におすすめの本
【番外】パソコン時短技
知ってるか知らないかだけで作業スピードが全く違うので読んで損のない本。
