Thuộc tính Display trong CSS

Tất cả các phần tử HTML đều có một giá trị mặc định cho thuộc tính CSS display. Thuộc tính này chỉ định phần tử sẽ được hiển thị như thế nào trong tài liệu.

LƯU Ý: Giá trị mặc định của display property có thể bị ghi đè (override), nhưng điều đó không thay đổi loại (type) của phần tử, chỉ thay đổi hành vi hiển thị của nó trên tài liệu.

Các giá trị phổ biến của CSS Display property

• Block - Chiếm toàn bộ chiều rộng, ngắt dòng
• Inline - Chỉ vừa nội dung, không ngắt dòng
• Inline-Block - Giống inline nhưng cho phép width/height/margin/padding
• None - Không hiển thị, không chiếm không gian
• Flex - Flexbox container
• Grid - Grid container
• Table - Bảng (table, table-row, table-cell, v.v.)

Ví dụ 1: Display block (mặc định của div)

<!DOCTYPE html>
<html>
<head>
<title>CSS Display</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin: 5px; box-sizing: border-box; }
  input[type="button"] { border-radius: 10px; }
  .child {
    display: block; /*default value for <div>*/
    height: 40px; width: 100%; color: white; border: 4px solid black;
  }
  .child:nth-of-type(1) { background-color: #FF8A00; }
  .child:nth-of-type(2) { background-color: #F44336; }
  .child:nth-of-type(3) { background-color: #C303C3; }
  .child:nth-of-type(4) { background-color: #4CAF50; }
  .child:nth-of-type(5) { background-color: #03A9F4; }
  .child:nth-of-type(6) { background-color: #FEDC11; }
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>CSS-Display</legend>
      <div id="container">
        <div class="child"></div><div class="child"></div><div class="child"></div>
        <div class="child"></div><div class="child"></div><div class="child"></div>
      </div><br>
    </fieldset>
  </form>
</body>
</html>

Kết quả

Ví dụ 2: Display inline trên div

<!DOCTYPE html>
<html>
<head>
<title>CSS Display</title>
<style>
  form { width: 70%; margin: 0 auto; text-align: center; }
  * { padding: 2px; margin: 5px; box-sizing: border-box; }
  input[type="button"] { border-radius: 10px; }
  .child {
    height: 40px; color: white; border: 4px solid black;
    display: inline;
  }
  .child:nth-of-type(1) { background-color: #FF8A00; }
  .child:nth-of-type(2) { background-color: #F44336; }
  .child:nth-of-type(3) { background-color: #C303C3; }
  .child:nth-of-type(4) { background-color: #4CAF50; }
  .child:nth-of-type(5) { background-color: #03A9F4; }
  .child:nth-of-type(6) { background-color: #FEDC11; }
</style>
</head>
<body>
  <form>
    <fieldset>
      <legend>CSS-Display</legend>
      <div id="container">
        <div class="child"></div> <div class="child"></div> <div class="child"></div>
        <div class="child"></div> <div class="child"></div> <div class="child"></div>
      </div><br>
    </fieldset>
  </form>
</body>
</html>

Kết quả

Bảng so sánh nhanh: