HTML Inline and Block Elements

HTML elements can be broadly categorized into one of two categories:

  • Inline Elements: <span>, <a>, <strong>, <img> etc.
  • Block Elements: <p>, <div>, <h1>, <figure> etc.

HTML Inline Elements

Inline elements are displayed on the same line. They do not start on a new line and take up only as much width as their contents require. An example of an inline element is the <span> tag.

<p>This is how <span style="border: 1px solid black">span</span> works. </p>

Browser Output

Example of span as an inline element

If we have multiple span tags, they get placed on the same line. For example,

<p> The following spans will be inline; <span style="border: 1px solid black">Span 1</span> and <span style="border: 1px solid black">Span 2</span>.</p>

Browser Output

Example of multiple spans on the same line

Some examples of inline elements are:

  • HTML <a> tag
  • HTML <input> tag
  • HTML <span> tag

Most HTML formatting tags are also inline. For example:

  • HTML <b> tag
  • HTML <em> tag
  • HTML <strong> tag, etc

HTML Block Elements

Block elements take up the whole horizontal space available in its container. They start on a new line and take up as much height as their contents require.

An example of a block element is the HTML Paragraph Tag.

<p style="border: 1px solid black">This is how block elements works. </p>

Browser Output

Example of paragraph as an inline element

If we have multiple block elements, they will each take a separate line. For example,

<p style="border: 1px solid black">Paragraphs are</p> <p style="border: 1px solid black">Block Elements.</p>

Browser Output

Example of multiple paragraph elements on different lines

Some frequently used Block elements are:

  • HTML <div> tag
  • HTML Headings <h1> - <h6>
  • HTML <p> tag, etc

Css With Html Inline And Block Elements

Height And Width In Inline Elements

CSS properties height and width have no effect on inline elements.

<p> The following span is an <span style="border: 1px solid black">Inline Element.</span></p>
<style>
  span {
    height: 200px;  /* No Effect on Element */
    width: 200px;  /* No Effect on Element */
  } 
</style>

Browser Output

HTML Span element with height and width set
Margins In Inline Elements

Inline elements also do not have top and bottom margins, they only respect left and right margin.

<div><span>1</span><span>2</span></div>
  <div><span>3</span><span>4</span></div>
  <style>
    span {
      margin-top: 10px;
      margin-bottom: 10px;
      margin-left: 10px;
      margin-right: 10px;
      border: 1px solid black;
    }
  </style>

Browser Output

HTML span with margins
Padding In Inline Elements

Inline elements respect padding in all directions.

<p><span>This is a span</span></p>
<style>
  span {
    padding: 10px;
    border: 1px solid black;
  }
</style>

Browser Output

HTML span element with padding
Height And Width In Block Elements

Block elements respect height and width properties. We can change both height and width of block elements using CSS.

<p style="border: 1px solid black;">This paragraph is a block element.</p>
<style>
  p {
    height: 200px;  /* This works */
    width: 200px;  /* This works */
  }
</style>

Browser Output

HTML Paragraph with Height and width set
Block Elements With Parent Container

Block elements take up the whole width of the parent container even if we set their width to a smaller size. Hence we cannot have a block element with another element in the same line without CSS. For example,

<p style="width: 20px; border: 1px solid black;background-color: lightblue">1</p><p style="width: 20px; border: 1px solid black; background-color: lightblue">2</p>

Browser Output

HTML Paragraphs with width set
Margins and Paddings In Block Elements

Block elements also respect top and bottom margins and padding directions. For example,

<div>Block</div>
<div>Block</div>
<style>
  div {
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
  }
</style>

Browser Output

2 Div elements with margin and padding

Our premium learning platform, created with over a decade of experience and thousands of feedbacks.

Learn and improve your coding skills like never before.

Try Programiz PRO
  • Interactive Courses
  • Certificates
  • AI Help
  • 2000+ Challenges