Difference between Block-level and Inline elements

Difference between Block-level and Inline elements

0 564

HTML Page is made up of various elements that used to building blocks (Structure of page) of web pages. Every element in HTML is displayed in one of a few ways.

By default, HTML most elements are divided into two categories: block-level elements and inline elements. Every HTML element has a default display value, it's depending on what type of element it is.

The default HTML display value for most elements is block or inline.

Block Level Elements

A block-level element is an Html element that always starts on a new line on a web page and it extends the full width of the available horizontal space of its parent element.

Examples of Block Level Elements:

<div> <footer> <form> <h1>-<h6> <header> <hr> <li> <nav> <p> <section> <ul> <video>


  • If no width is set, it will expand naturally to fill its parent container
  • If no height is set, it will expand naturally to fit its child elements
  • Ignores the vertical-align property
  • A line break before and after the element
  • It is always 100% screen size in block elements

Inline Elements

HTML inline-level elements can appear in the body of an HTML page. HTML inline-level elements do not start on a new line. It can contain data and other inline elements.

You can not write HTML block-level element inside HTML inline-level elements (can’t wrap block-level elements). HTML inline-level elements create shorter structures (than block-level elements).

Example of Inline Elements:

<a>, <span>, <b>, <em>, <i>, <cite>, <mark>, and <code>.


  • HTML Inline elements start in an anywhere line, it does not force in new lines.
  • HTML Inline elements No line break before or after the element
  • HTML Inline elements will use only the exact space in needs
  • HTML Inline elements can be 1%-100% of screen size in inline elements


Discount Coupons

Leave a Reply

    Waiting for your comments