Inline Element V/S Block Element

In HTML we can display elements or group elements either in a single line or in a block for this we will use inline elements and block elements.

1. Block-Level Elements

   • Display Behavior:

     • Block-level elements occupy the full width available by default (from left to right in a parent container).

     • They start on a new line and push the following content to a new line.

you can see the text is written in different lines just because the heading element is a block element and takes the whole width

• Dimensions:

  • You can set the width, height, margin, and padding of block-level elements.

• Usage:

  • They are typically used for larger sections of content or structure.

• Common Block-Level Elements:

  • <div>, <p>, <h1>, <h2>, <h3>, <ul>, <ol>, <table>, <section>, <article>, <footer>, <header>, etc.

    <h1>examples of block element</h1>
    <p>block element take whole width</p>
    <section>
        this is section tag
        it is also a block element
    </section>

again you can see in the above example we have used some block elements such as <p>, <h1>, and <section> and all the content is in a new line because the block element takes the whole width

2. Inline Elements

   • Display Behavior:

     • Inline elements only occupy the space needed for their content.

     • They do not start on a new line; instead, they flow along with the text and other inline elements within a block-level element.

   • Dimensions:

     • You cannot directly set the width and height of inline elements. Only padding and margin (horizontal) can be applied, but not vertical margins.

   • Usage:

     • Inline elements are typically used for smaller pieces of content, like formatting a few words within a paragraph.

   • Common Inline Elements:

     • <span>, <a>, <img>, <b>, <i>, <u>, <em>, <strong>, <abbr>, <code>, etc.

examples:

    <span> This is inline element  </span>
    <a href="https://www.google.com">link is also a inline element</a>

The inline elements take up that much space which is needed for their content <span>, <a> tag in the above example takes only the required space unlike block elements