ブロックレベル要素

ブロックレベル要素は親要素 (コンテナー) の領域全体を占有して、「ブロック」を生成します。 ブロックレベル要素は常に新しい行から始まり、利用可能な全幅を取ります。 参考 → ブロックレベル要素 - HTML: HyperText Markup Language | MDN

ブロックレベル要素の種類

    <address>
    <article>
    <aside>
    <blockquote>
    <canvas>
    <dd>
    <div>
    <dl>
    <dt>
    <fieldset>
    <figcaption>
    <figure>
    <footer>
    <form>
    <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
    <header>
    <hgroup>
    <hr>
    <li>
    <main>
    <nav>
    <noscript>
    <ol>
    <output>
    <p>
    <pre>
    <section>
    <table>
    <tfoot>
    <ul>
    <video>
    

インライン要素

インライン要素はコンテンツの流れを分断せずに、要素を定義するタグで囲まれた範囲だけを占有します。 参考 → インライン要素 - HTML: HyperText Markup Language | MDN

インライン要素の種類

    <a>
    <abbr>
    <acronym>
    <b>
    <bdo>
    <big>
    <br>
    <button>
    <cite>
    <code>
    <dfn>
    <em>
    <i>
    <img>
    <input>
    <kbd>
    <label>
    <map>
    <object>
    <q>
    <samp>
    <script>
    <select>
    <small>
    <span>
    <strong>
    <sub>
    <sup>
    <textarea>
    <time>
    <tt>
    <var>

ブロックレベル要素とインライン要素の違い

ブロックレベル要素とインライン要素の間には、2つの違いがあります。 ①ブロックレベル要素は新しい行から始まりますが、インライン要素は行内のどこからでも始めることができます。 ②ブロックレベル要素はインライン要素と他のブロックレベル要素を含むことができます。 固有の構造による区別は、ブロック要素がインライン要素よりも「大きな」構造を構築するという考え方です。

おまけ　・・・　要素ごとの中央寄せの方法

ブロック要素の中央寄せ →　margin:0 auto;

インライン要素の中央寄せ →　text-align:center;