Tự code rồi chạy thử... Chạy Thử

<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính display trong CSS</title>
<style>
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; float:left; height: auto; padding:5px; background:#ddd; border: 1px solid red; margin-bottom: 10px}
span{color:#fff; background:green}
</style>
</head>
<body>

<h1>Code Thuộc tính display trong CSS</h1>
  
  <div> 
  <h3>display:block;</h3>
  <p>Phần tử HTML có giá trị <span style="display:block;" >display:block;</span> sẽ chiếm hết một hàng</p>
  </div>
  
  <div> 
  <h3>display:none;</h3>
  <p>Phần tử HTML có giá trị <span style="display:none;" >display:none;</span> sẽ bị ẩn đi</p>
  </div>
  
  <div> 
  <h3>display:inline;</h3>
  <p>Phần tử HTML có giá trị <span style="display:inline;" >display:inline;</span> sẽ được hiển thị cùng trên một dòng với các chữ khác trong một câu, bản thân nó sẽ không được quy định chiều rộng và chiều cao</p>
  </div>
  
  <div> 
  <h3>display:inline-block;</h3>
  <p>Phần tử HTML có giá trị <span style="display:inline-block; width:100px; height:50px" >display:inline-block;</span> sẽ được hiển thị cùng trên một dòng với các chữ khác trong một câu, bản thân nó sẽ được quy định chiều rộng và chiều cao</p>
  </div>
  
  <div> 
  <h3>display:grid;</h3>
  <p style="display:grid;">Các phần tử con nằm trong phần tử HTML cha có giá trị <span>display:grid;</span> đều có chiều rộng full <span>100%</span>.</p>
  </div>
  
</body>
</html>

Code Thuộc tính display trong CSS nằm trong bài viết Thuộc tính display trong CSS