HTML Block and Inline Elements

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):

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.