HTMLには色々な要素（h1とかp）がありますが、その要素は大きく分けて「ブロックレベル要素」と「インライン要素」の2つに分かれます。
この「ブロックレベル要素」と「インライン要素」の違いと特性をしっかりと理解する事で、実際に制作する際によく生じてしまう、意図しないズレや空きを無くす事が出来ます。
インライン要素
インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、p要素の中のspan要素のように、段落のなかの一部を修飾・強調するような使われ方をする要素です。 一般的なブラウザでは改行されず、横に並びます。
<a>、<abbr>、<br>、<em>、<img>、<input>、<label>、<select>、 <small>、<span>、<strong> など
ブロックレベル要素
ブロックレベル要素は、見出し・段落・表など、HTMLを構成する基本となる要素で、一つのブロック（かたまり）として認識されます。 ブラウザでの表示も一つのかたまりとして扱われることが多く、一般的なブラウザでは改行されます。
<div>、<h1>-<h6>、<ol>、<ul>、<li>、<p>、<table> など
配置ルール
ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。 一方、インライン要素の中には、他のインライン要素を配置することができますが、 インライン要素の中にブロックレベル要素を配置することはできません。
正しい配置方法
<p><span>段落となります。</span></p>
間違った配置方法
<span><p>段落となります。</p></span>
インライン要素の特性
width – 効かない
height – 効かない
margin – 左右は効くけど、上下は効きません。
padding – 一応上下左右効くけど、上下は不安定 …。
特別なインライン要素 img、input、textarea
同じインライン要素でも img タグ、input タグ、textarea タグ などは特別です。インライン要素なので、他のインライン要素と同じように、続けて書くと横に並びます。
しかし、他のインライン要素との大きな違いは、margin や padding、width や height も指定できるところです。
width – 効く
height – 効く
margin – 効く
padding – 効く
インライン要素をブロックレベル化する「display: block 」
width や heightを指定できないインライン要素に対し、
「display: block 」を指定する事でa要素などをブロックレベル化する事が出来、width や heightを指定する事が出来ます。
a {
display: block;
}
コメント