こんにちは
今回はブロック要素とインライン要素の違いについて紹介したいと思います。
ブロック要素
ブロック要素は見出し・段落・表など、文書を構成する基本となる要素です。
ブロック要素には以下のタグがあります。
<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、
<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>
ブロック要素の特徴としては、要素が縦に積み重なっていきます。
インライン要素
インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われます。 例えば、<p>要素の中の<strong>要素のように、段落のなかの一部を強調するような使われ方をする要素です。 一般的なブラウザでは前後に改行が入らず、文章の一部として表示されます。
インライン要素には以下のタグがあります。
<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、
<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、
<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>
インライン要素の特徴としては、要素が横に並んでいきます。
注意点
ブロックレベル要素の中には、他のブロックレベル要素やインライン要素を配置することができます。 一方、インライン要素の中には、文字データや他のインライン要素を配置することができますが、 インライン要素の中にブロックレベル要素を配置することはできません。
正：ブロックレベル要素の中にインライン要素を配置
<p><strong>段落となります。</strong></p>
誤：インライン要素の中にブロックレベル要素を配置
<strong><p>段落となります。</p></strong>
スタイル
ブロック要素はtext-align:center;が効きません（要素の中で中央揃えにはなりますが）
インライン要素は左右のmarginとpaddingは効きますが上下のmarginは効かず、paddingは効きますが他の要素と被ってしまい、デザインが崩れてしまう恐れがあります。
最後に
インライン要素やブロック要素はわかりにくい部分なので、理解が深まってよかったです。
コメント