CSS display property to change the HTML element from CSS display block to inline

Ad Banner Image

CSS Display Property

All the HTML elements have default look and feel (display behavior), with the use of the CSS Display Property you can change that default display structure of an HTML Element. Through this property you can change Block Level Elements into Inline Elements or Inline Elements into Block Elements.

Where <a> tag is an Inline Element with the use of Display Property you can change this Inline Element into the Block Level Element.

Example 1 – How to convert HTML link inline element to block.

<!DOCTYPE html>
<html>
    <head>
		<style>
		   .ab
		   {
		    display:block;
		   }
		</style>
    </head>
    <body>
        <a href="index.html">Home</a>
        <a href="about.html">About Us</a>
        <a href="products.html">Products</a>
        <a href="contact.html">Contact Us</a>
		<a class ="ab" href="index.html">Home</a>
        <a class ="ab" href="about.html">About Us</a>
        <a class ="ab" href="products.html">Products</a>
    </body>
</html>
CSS Display Property with Link CSS display inline Element
Fig.1 – Example of display property with HTML Link element

In the above screenshot and code shows how the default structure of <a> and how it can be changed with the use of the Display Property.

CSS Display Block

Block Level Elements cover complete horizontal space and always start with the new line.

Display Block or {display:block;} can change the Inline Elements into the Block Level Elements.

Some Block Level Elements in HTML

Tag Description
<h1> <h2>……..<h6> Tag All heading tags
<p> Tag Paragraph Tag
<div> Tag It is a container Tag
<pre> Tag Pre formatted text

CSS Display Inline

Inline HTML Elements are those HTML Elements which cannot acquire complete horizontal spaces. All the text will show side by side to the text.

CSS Display Inline or {display:inline;} can change the Block Level Elements into Inline Elements.

Some Inline HTML Elements

Tag Typical Use
<a> Tag Link Tag for hyperlinks
<img> Tag Image Tag
<span> Tag It is inline container Tag
<b> Tag Bold text
<strong> Tag Define important text

Through Display Property you can change Inline Elements into Block Level Elements.

Example 2 – Use of Display Property to change the h2 block element to inline element

<!DOCTYPE html>
<html>
    <head>
		<style>
		   .ab
		   {
		      display:block;
		   }
		   .cd
		   {
		      display:inline;
		   }
		</style>
    </head>
    <body>
        <a href="index.html">Home</a>
        <a href="about.html">About Us</a>
        <a href="products.html">Products</a>
        <a href="contact.html">Contact Us</a>
		<h2> This is a first heading.</h2>
		<h2> This is a second heading.</h2>
		<h2> This is a third heading.</h2>
		<a class ="ab" href="index.html">Home</a>
        <a class ="ab" href="about.html">About Us</a>
        <a class ="ab" href="products.html">Products</a>
		<h2 class ="cd"> This is a first heading.</h2>
		<h2 class ="cd"> This is a second heading.</h2>
		<h2 class ="cd"> This is a third heading.</h2>
    </body>
</html>
CSS Display Block vs Inline
Fig.2 – CSS Display Block vs Inline

Here, <p> is a Block Level Element and above code shows that how can you change a Block Level Element into Inline Element. And the above screenshot shows the result of the above code.

Sponsor Banner
You can leave a response, or trackback from your own site.
Leave a Reply to the article


Learn CSS

Learning & Certifications
Follow Us
Facebook Icon   Linked In Icon   Twitter Icon  
Validation and Recognition

Valid CSS! Valid HTML5!

Powered by Wordpress