</CSS3 DISPLAY PROPERTY>

CSS3 DISPLAY PROPERTY

If we want to convert an Inline element into the Block element or a Block element into the inline element then we can use CSS display property. A simple example is given below

Display Syntax
display: value;


<style>
	.tdb-display{
	display: value;
	}
</style>

Here we are changing a <span> tag (inline element) into a block element and a <div> tag (block element) into an Inline element.

Click on the try it button and run the code yourself.


	

<head>
	<style>
	.tdb-display{
		display: inline-block;
		background-color:red;
		}
		.tdb-display1{
		display: block;
		background-color:green;
		}
	</style>
</head>

<body>
	<!--block element-->
	<div class="tdb-display">display inline</div><br>
	<!--inline element-->
	<span class="tdb-display1">display block</span>
</body>

Try it Yourself

CSS3 DISPLAY PROPERTY EXAMPLES

These are the values we can use with display property to change the display behaviour on HTML elements.


<style>
	.tdb-ex1 {display: none;
	}
	.tdb-ex1 {display: inline;
	}
	.tdb-ex1 {display: block;
	}
	.tdb-ex1 {display: content
	}
	.tdb-ex1 {display: inline-block;
	}
	.tdb-ex1 {display: flex
	}
	.tdb-ex1 {display: table-row
	}
	.tdb-ex1 {display: table-column
	}
	.tdb-ex1 {display: table-cell
	}
	.tdb-ex1 {display: table-row-group
	}
	.tdb-ex1 {display: table-footer-group
	}
	.tdb-ex1 {display: table-header-group
	}
	.tdb-ex1 {display: table-column-group
	}
	.tdb-ex1 {display: inline-flex
	}
	.tdb-ex1 {display: inline-grid
	}
	.tdb-ex1 {display: inline-table
	}
	.tdb-ex1 {display: list-item
	}
	.tdb-ex1 {display: run-in
	}
	.tdb-ex1 {display: table
	}
	.tdb-ex1 {display: table-caption
	}
	.tdb-ex1 {display: inherit
	}
	.tdb-ex1 {display: initial
	}
	.tdb-ex1 {display: not inherited
	}
</style>