Skip to main content

Inline vs Block element

Difference b/t both

Inline elements:

  • Don't start on a new line.
  • Take up only as much width as necessary.
  • Don't force a new line after them.
  • width, height,vertical margin wont work here;
  • padding will work
  • Examples: <span>, <a>, <img>, <strong>, <em>

Inline element have two type

  1. normal like span
  2. <img> ,<video>

Block elements

  • Start on a new line.
  • Take up the full width available.
  • it will take width from parent if all parent don't have width it with respect viewport,
  • Force a new line after them.
  • Examples: <div>, <p>, <h1> to <h6>, <ul>, <li>