Every HTML element has a default display value, depending on what type of element it is. There are two display values: block and inline.

Block-level Elements
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element. A block-level element always takes up the full width available (stretches out to the left and right as far as it can). Block elements appear on the screen as if they have a line break before and after them. For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements. They all start on their own new line, and anything that follows them appears on its own new line .Two commonly used block elements are: <p>
and <div>
. The <p>
element defines a paragraph in an HTML document. The <div>
element defines a division or a section in an HTML document. The <p> element is a block-level element. The <div> element is a block-level element.
- A Block level element is displayed like an imaginery rectangular box.
- It takes up the whole width of the page, from left to right and does not share any space.
- Each block element begins on a new line.
* {
border: 1px solid red !important;
}

Example
<p>Hello World</p> <div>Hello World</div>
Inline Elements
An inline element does not start on a new line. An inline element only takes up as much width as necessary. This is a <span> element inside a paragraph. Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements.
Example
<span>Hello World</span>
The <div> Element
The <div>
element is often used as a container for other HTML elements. The <div>
element has no required attributes, but style
, class
and id
are common. When used together with CSS, the <div>
element can be used to style blocks of content:
Example:
<div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div>
Other Example
<!DOCTYPE html> <html> <head> <title>HTML div Tag</title> </head> <body> <!-- First group of tags --> <div style = "color:red"> <h4>This is first group</h4> <p>Following is a list of vegetables</p> <ul> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> <li>Radish</li> </ul> </div> <!-- Second group of tags --> <div style = "color:green"> <h4>This is second group</h4> <p>Following is a list of fruits</p> <ul> <li>Apple</li> <li>Banana</li> <li>Mango</li> <li>Strawberry</li> </ul> </div> </body> </html>
Output
This is first group
Following is a list of vegetables
Beetroot
Ginger
Potato
Radish
This is second group
Following is a list of fruits
Apple
Banana
Mango
Strawberry
The <span> Element
The <span>
element is an inline container used to mark up a part of a text, or a part of a document. The <span>
element has no required attributes, but style
, class
and id
are common. When used together with CSS, the <span>
element can be used to style parts of the text:
Example:
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
Other Example
<!DOCTYPE html> <html> <head> <title>HTML span Tag</title> </head> <body> <p>This is <span style = "color:red">red</span> and this is <span style = "color:green">green</span></p> </body> </html>
Output
This is red and this is green
Changing Level Elements
You can change the visual presentation of an element using the CSS display
property. For example, by changing the value of display
from "inline"
to "block"
, you can tell the browser to render the inline element in a block box rather than an inline box, and vice versa. However, doing this will not change the category and the content model of the element. For example, even if the display
of the span
element is changed to "block"
, it still would not allow to nest a div
element inside it.
Conceptual Difference
In brief, here are the basic conceptual differences between inline and block-level elements:Content model Generally, inline elements may contain only data and other inline elements. You can’t put block elements inside inline elements.
Formatting
By default, inline elements do not force a new line to begin in the document flow. Block elements, on the other hand, typically cause a line break to occur (although, as usual, this can be changed using CSS).
List Of Inline Elements
The following elements are inline by default (although block and inline elements are no longer defined in HTML 5, use content categories instead):
<a>
<abbr>
<acronym>
<audio>
(if it has visible controls)<b>
<bdi>
<bdo>
<big>
<br>
<button>
<canvas>
<cite>
<code>
<data>
<datalist>
<del>
<dfn>
<em>
<embed>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<label>
<map>
<mark>
<meter>
<noscript>
<object>
<output>
<picture>
<progress>
<q>
<ruby>
<s>
<samp>
<script>
<select>
<slot>
<small>
<span>
<strong>
<sub>
<sup>
<svg>
<template>
<textarea>
<time>
<u>
<tt>
<var>
<video>
<wbr>
Block and Inline Differences
Every HTML element has a default method of displaying on the page. This default setting is determined by whether elements are considered block-level or inline.
Block-level elements
Block-level elements have the following properties:
- Always start on a new line
- Take up as much horizontal space as possible (the full width of the container or browser window if there is no container)
- Will respect width and height CSS properties
- Horizontal and vertical margins both work
Inline elements
Inline elements have the following properties:
- Do not start on a new line
- Only use as much horizontal space as required by the content
- Do not accept width and height CSS properties
- Margins will work horizontally, but not vertically
- Padding works on all sides, but the top and bottom may overlap other elements.