Block-level And Inline Elements

In this article we will talk about Block level and Inline Elements and what is the difference between them.

Block Element

• A block-level element always begins on a new line, and browsers add a margin (a space) before and after the element by default.

• A block-level element always occupies the entire available width (stretches out to the left and right as far as possible).

• <p> and <div> are two often used block components.

• HTML (HyperText Markup Language) elements historically were categorized as either "block-level" elements or "inline-level" elements. Since this is a presentational characteristic it is nowadays specified by CSS in the Flow Layout. A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space is equal to the height of its contents, thereby creating a "block".

• Note: A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

Elements

1. <address>

2. <article>

3. <aside>

4. <blockquote>

5. <canvas>

6. <dd>

7. <div>

8. <dl>

9. <dt>

10. <fieldset>

11. <figcaption>

12. <figure>

13. <footer>

14. <form>

15. <h1>-<h6>

16. <header>

17. <hr>

18. <li>

19. <main>

20. <nav>

21. <noscript>

22. <ol>

23. <p>

24. <pre>

25. <section>

26. <table>

27. <tfoot>

28. <ul>

29. <video>

    Inline Element

    • A line break is not used to begin an inline element.

    • An inline element only uses the space that is required.

    • An inline element cannot contain a block-level element.

    • An inline element does not start on a new line.

    • An inline element only takes up as much width as necessary.

    • This is an <span> element inside a paragraph.

      Here are the inline elements in HTML:

      1. <A>

      2. <abbr>

      3. <acronym>

      4. <b>

      5. <bdo>

      6. <big>

      7. <br>

      8. <button>

      9. <cite>

      10. <code>

      11. <dfn>

      12. <em>

      13. <i>

      14. <img>

      15. <input>

      16. <kbd>

      17. <label>

      18. <map>

      19. <object>

      20. <output>

      21. <q>

      22. <samp>

      23. <script>

      24. <select>

      25. <small>

      26. <span>

      27. <strong>

      28. <sub>

      29. <sup>

      30. <textarea>

      31. <time>

      32. <tt>

      33. <var>

    **Note:** An inline element cannot contain a block-level element!