Login With Github

HTML Block and Inline Elements

HTML elements can be divided into block-level elements and inline elements according to the way they are displayed.

Block-level elements

The block-level element always occupies a single line, and the following element starts from a new line.

The width, height , padding and margin of a block-level element all can be changed in CSS.

These are block-level elements:

<address> <article> <aside> <blockquote> <canvas>
<dd> <div> <dl> <dt> <fieldset>
<figcaption> <figure> <footer> <form> <h1>-<h6>
<header> <hr> <li> <main> <nav>
<noscript> <ol> <output> <p> <pre>
<section> <table> <tfoot> <ul> <video>

Inline elements

Inline elements and the adjacent inline elements are displayed on the same line.

Neither of the width, height, padding-top, padding-bottom, margin-top, and margin-bottom of an inline element can be changed.

These are inline elements:

<a> <abbr> <acronym> <b> <bdo>
<big> <br> <button> <cite> <code>
<dfn> <em> <i> <img> <input>
<kbd> <label> <map> <object> <q>
<samp> <script> <select> <small> <span>
<strong> <sub> <sup> <textarea> <time>
<tt> <var>      


The <div> element is the most typical block-level element in HTML, and it's usually to be the container for other HTML elements.

The most common use of the <div> element is to set the layout of a HTML page. The layout of div takes the place of the earlier table layout.

You can define the style attributes, such as background color, font, and margins, etc., to set the style of the <div> block:

<div style="background-color:black;color:white;padding:20px;">


  <p>HTML is the standard markup language used to describe web pages.</p>


<span> element

The <span> element is the most typical inline element in HTML, and it's usually used as a container for text.

You can define style attributes to set the style of the text inside the <span> element:

<h1>My <span style="color:red">Important</span> Heading</h1>

CSS display attribute

We can use the display attribute in CSS to change the way how elements are to be displayed.

There are three types of display attribute values:

  • display:block - displayed as a block-level element
  • display:inline - displayed as an inline element
  • display:inline-block - displayed as an inline-block element that appears in the same line, and the width and height of the inside and outside margins can be modified

For an example, we can convert the <span> element to a block-level element:

<span>This is an inline element </span>

<span style="display:block;">This is an inline element, but it has been converted to a block-level element.</span>

<span>This is an inline element </span>

After running the code, you can find that the second <span> element has on a line by itself and has become a block-level element.

0 Comment