Webmastertoolbag Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
p {
  background-color: blue;
  padding: 10px;
}

span {
  background-color: red;
  color: white;
  padding: 10px;
}

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
p.ex5 {display: flex;}
p.ex6 {display: grid;}
</style>
</head>
<body>
<h1>The display Property</h1>

<h2>display: none:</h2>
<p class="ex1">
  Text 1
  Text 2
  Text 3
</p>

<h2>display: inline:</h2>
<p class="ex2">
  Text 1
  Text 2
  Text 3
</p>

<h2>display: block:</h2>
<p class="ex3">
  Text 1
  Text 2
  Text 3
</p>

<h2>display: inline-block:</h2>
<p class="ex4">
  Text 1
  Text 2
  Text 3
</p>

<h2>display: flex:</h2>
<p class="ex5">
  Text 1
  Text 2
  Text 3
</p>

<h2>display: grid:</h2>
<p class="ex6">
  Text 1
  Text 2
  Text 3
</p>