Difference between Block-level and Inline elements

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>

Note:

• 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>.

Note:

• 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