Explain the difference between block elements and inline elements

Technology CommunityCategory: HTML5Explain the difference between block elements and inline elements
VietMX Staff asked 3 years ago
  • Block elements are those that take up the full width available on a web page, effectively blocking out any other elements from sitting next to it on the left or right.
  • Inline elements are those who only take up as much width as is needed to display the contents of the element, thereby allowing other elements to be in line with the inline element.

Common block elements:

  • Paragraphs (<p>)
  • Headers (<h1> through <h6>)
  • Divisions (<div>)
  • Lists and list items (<ol><ul>, and <li>)
  • Forms (<form>)

Common inline elements:

  • Spans (<span>)
  • Images (<img>)
  • Anchors (<a>)