How to display block elements as inline elements ?

In this post we will learn how to display block level elements as inline elements by using CSS and below are the details.

• Below are the examples of block level elements in html.
  • <div>
  • <h1>-<h6>
  • <table>
  • <form>
• Block level elements take full width of the page irrespective of content.
• Below are the examples of inline elements in html.
  • <a>
  • <span>
  • <button>
  • <input>
  • <textarea>
  • <img>
• An inline elements take the width of the content.
• Add class name as “inline-element“
• Add below mentioned css to “inline-element” class.
• Here display property is required to display inline element as block element on the page.

.inline-element{
   display: inline-block;
}

• By adding above css inline-element class block element will be displayed as inline element.