HTML Block and Inline Elements

  • All HTML elements have a default display value that determines whether they behave as block or inline elements.
block-inline

Inline element:

  • <span>
  • <a>
  • <strong>
  • <em>
  • <img>
  • <input>
  • <br>
  • <button>

Block element:

  • <div>
  • <p>
  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <ul>
  • <ol>
  • <li>
  • <nav>
  • <header>
  • <footer>
  • <section>
  • <article>

Now we will see both elements in detail

Inline element

  • Inline elements do not start on a new line
  • They occupy only the space necessary to display their content.

Code Example:

class-image

Output:

Designwithrehana Rehanakadrama Mixedprism

🚀 Try it yourself! Click the button below to run the code and see the output in action.

HTML Code

Output

Note: Line break nahi hui utna hi space liya hai jitna content hai

Block element

  • Block-level elements start on a new line
  • It take up the full available width of their parent container.

Code Example:

class-image

Output:

Designwithrehana

Rehanakadrama

Mixedprism

HTML Code

Output

Note: Hamesha new line se start hota hai agr dusra tag use krte hai. Full width cover krta hai default spacing bhi add hoti hai

Important Note: Want to download the full HTML course as a PDF? Click here to save it locally!

Leave a Comment