display css - itviec blog

Thuộc tính display CSS có ảnh hưởng lớn đến cách sắp xếp và bố trí của phần tử HTML trên mỗi trang web. Chẳng hạn, khi muốn sử dụng các mô hình hiện đại như Flexbox, Grid, bạn cần áp dụng thuộc tính display mới có thể khai thác được hết tính năng và giá trị của chúng. Vậy display CSS gồm những tính năng gì và cách áp dụng như thế nào?

Qua bài viết, ITviec sẽ giúp bạn hiểu rõ hơn:

  • Display CSS là gì? Mục đích sử dụng là gì?
  • Chi tiết 9 cách sử dụng thuộc tích Display CSS kèm ví dụ cụ thể

Display CSS là gì? Vai trò của display CSS trong thiết kế web

Thuộc tính display CSS là công cụ giúp các Front end developer kiểm soát cách thức hiển thị của các phần tử HTML trên trang web bằng cách thay đổi kiểu hiển thị mặc định của phần tử đó.

Ví dụ: Mỗi phần tử HTML có một kiểu mặc định bởi trình duyệt web. Phần tử <div> hiển thị như một khối (block), phần tử <span> hiển thị như nội tuyến (inline). Với thuộc tính display CSS, bạn có thể ghi đè kiểu mặc định này và thay đổi cách chúng hiển thị. Chẳng hạn, bạn có thể thay đổi phần tử khối thành nội tuyến hoặc ngược lại. 

Thuộc tính display CSS giúp bố cục trang web trở nên liên kết hơn, thu hút người dùng và tăng tính tương tác hơn nhờ 4 khả năng:

  • Kiểm soát hành vi mặc định của phần tử

Thuộc tính display cho phép thay đổi hoàn toàn hiển thị mặc định của phần tử, mang đến sự linh hoạt trong việc điều chỉnh bố cục trang. Bạn không chỉ có thể biến một phần tử khối thành nội tuyến hoặc ngược lại như ví dụ trên mà còn có thể tạo ra các bố cục phức tạp với nhiều cột và hàng.

  • Tạo bố cục trang web phức tạp

Nhờ khả năng kiểm soát chính xác cách hiển thị từng phần tử, thuộc tính display trở thành công cụ đắc lực cho việc tạo ra các bố cục trang web phức tạp và độc đáo.

Ví dụ:

  • Sử dụng display: flex để tạo bố cục flexbox, sắp xếp các phần tử con theo nhiều hướng;
  • Sử dụng display: grid để tạo bố cục lưới, sắp xếp các phần tử con thành hàng và cột một cách ngay ngắn, khoa học.

Thậm chí, bạn còn có thể kết hợp nhiều giá trị display khác nhau để tạo ra các bố cục phức tạp hơn.

  • Hiển thị nội dung theo ý muốn

Thuộc tính display cung cấp khả năng ẩn hoặc hiển thị các phần tử một cách linh hoạt, giúp bạn kiểm soát chính xác nội dung hiển thị trên trang web. Điều này đặc biệt hữu ích trong việc tạo ra các hiệu ứng động, hiển thị hay ẩn nội dung theo tương tác của người dùng, hoặc đơn giản là tối ưu hóa bố cục trang cho từng thiết bị khác nhau.

  • Tăng cường khả năng tiếp cận

Việc sử dụng thuộc tính display hợp lý sẽ giúp nâng cao khả năng tiếp cận của trang web, đảm bảo mọi người dùng dù sử dụng thiết bị nào đi nữa cũng có thể truy cập và tương tác một cách dễ dàng.

Cú pháp và các giá trị của thuộc tính display CSS

Giá trị Mô tả Cú pháp
inline Hiển thị một phần tử dưới dạng phần tử nội tuyến (inline). Mọi thuộc tính chiều cao và chiều rộng đều không có hiệu lực. 

display: inline;

display css - itviec blog

block Hiển thị một phần tử dưới dạng phần tử khối. Nội dung sẽ bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng.

display: block;

display css - itviec blog

contents Làm cho vùng chứa (container) biến mất, khiến các phần tử con trở thành phần tử con trực tiếp của phần tử cha ban đầu trong DOM.

display: contents;

display css - itviec blog

flex Hiển thị một phần tử dưới dạng thùng chứa linh hoạt cấp khối (block-level flex container).

display: flex;

display css - itviec blog

grid Hiển thị một phần tử dưới dạng vùng chứa lưới cấp khối (block-level grid container).

display: grid;

display css - itviec blog

inline-block Hiển thị một phần tử dưới dạng vùng chứa khối cấp độ nội tuyến (inline-level block container). Phần tử này được định dạng như một phần tử inline, nhưng bạn có thể áp dụng các giá trị chiều cao và chiều rộng.

display: inline-block;

display css - itviec blog

inline-flex Hiển thị một phần tử dưới dạng vùng chứa linh hoạt cấp độ nội tuyến (inline-level flex container), nhưng chúng sử dụng bố cục flexbox để sắp xếp các phần tử con một cách linh hoạt.

display: inline-flex;

display css - itviec blog

inline-grid Hiển thị một phần tử dưới dạng vùng chứa lưới cấp độ nội tuyến (inline-level grid container), nhưng chúng sử dụng bố cục lưới để sắp xếp các phần tử con thành hàng và cột.

display: inline-grid;

display css - itviec blog

inline-table Phần tử được hiển thị dưới dạng bảng cấp độ nội tuyến (inline-level table). Giá trị này ít được sử dụng trong thực tế vì nó có thể gây ra một số vấn đề về bố cục và khả năng tương thích.

display: inline-table;

display css - itviec blog

list-item Các phần tử hoạt động giống như phần tử <li> và <ul>.

display: list-item;

display css - itviec blog

run-in Hiển thị một phần tử dưới dạng khối hoặc nội tuyến, tùy thuộc vào ngữ cảnh. Giá trị này ít được sử dụng trong thực tế vì nó có thể dẫn đến hành vi không mong muốn và khó kiểm soát bố cục.

display: run-in;

display css - itviec blog

table Thiết lập cách phần tử hoạt động giống như phần tử <table>.

display: table;

display css - itviec blog

table-caption Thiết lập cách phần tử hoạt động giống như phần tử <caption>.

display: table-caption;

display css - itviec blog

table-column-group Thiết lập cách phần tử hoạt động giống như phần tử <colgroup>. display: table-column-group;
table-header-group Thiết lập cách phần tử hoạt động giống như phần tử <thead>. display: table-header-group;
table-footer-group Thiết lập cách phần tử hoạt động giống như phần tử <tfoot>. display: table-footer-group;
table-row-group Thiết lập cách phần tử hoạt động giống như phần tử <tbody>. display: table-row-group;
table-cell Thiết lập cách phần tử hoạt động giống như phần tử <td>. display: table-cell;
table-column Thiết lập cách phần tử hoạt động giống như phần tử <col>. display: table-column;
table-row Thiết lập cách phần tử hoạt động giống như phần tử <tr>. display: table-row;
none Phần tử bị loại bỏ hoàn toàn. display: none;
initial Thiết lập phần tử về giá trị mặc định. display: initial;
inherit Phần tử được kế thừa thuộc tính từ phần tử cha. display: inherit;

Các giá trị phổ biến của display CSS kèm ví dụ

Trong CSS có hai loại phần tử là cấp dòng và cấp khối. Phần tử cấp khối chiếm toàn bộ không gian trên một dòng mới, phần tử cấp dòng thì ngược lại. Mỗi giá trị của thuộc tính display CSS có ảnh hưởng đến cách một phần tử được bố cục và hiển thị trên trang web. Để hiểu rõ hơn về từng giá trị, hãy theo dõi nội dung bên dưới đây nhé.

display: inline;

Giá trị inline biến các phần tử HTML thành phần tử nội tuyến. Các phần tử này sẽ xuất hiện trên cùng một dòng mà không bị ngắt quãng, giống như cách các phần tử <span> hoạt động. Đặc biệt, chiều rộng và chiều cao của các phần tử nội tuyến được xác định bởi nội dung mà chúng chứa. Do đó, bạn không thể đặt chiều rộng và chiều cao của chúng bằng CSS.

Ví dụ về display: inline;

HTML CSS

<body>

  <div id=”div-0″>div 1</div>

  <div id=”div-1″>div 2</div>

  <div id=”div-2″>div 3</div>

  <br>

  <span id=”span-0″>span 1</span>

  <span id=”span-1″>span 2</span>

  <span id=”span-2″>span 3</span>

</body>

body { font-family: “Arial”; }

div, span {

  background-color: #2e3f50;

  border-radius: 5px;

  display: inline;

}

div { color: #fd8f59; }

span { color: #1ebda5; }

Kết quả hiển thị:

display css - itviec blog

display: block;

Giá trị block làm cho một phần tử trở thành phần tử khối. Các phần tử khối bắt đầu một dòng mới và chiếm toàn bộ chiều rộng của khung nhìn theo mặc định, tương tự cách các phần tử <div> hoạt động. 

Ví dụ về display: block;

HTML CSS

<body>

  <div id=”div-0″>div 1</div>

  <div id=”div-1″>div 2</div>

  <div id=”div-2″>div 3</div>

  <br>

  <span id=”span-0″>span 1</span>

  <span id=”span-1″>span 2</span>

  <span id=”span-2″>span 3</span>

</body>

body { font-family: “Arial”; }

div, span {

  background-color: #2e3f50;

  border-radius: 5px;

  display: block;

}

div { color: #fd8f59; }

span { color: #1ebda5; }

Kết quả hiển thị:

display css - itviec blog

display: inline-block

inline-block có thể xem là sự kết hợp giữa hai giá trị inline và block. Khi được gán giá trị này, phần tử được thiết lập như inline nhưng có thể điều chỉnh chiều rộng và chiều cao, điều mà inline không làm được. 

Ví dụ về display: inline-block;

HTML CSS

<body>

  <div id=”div-0″>div 1</div>

  <div id=”div-1″>div 2</div>

  <div id=”div-2″>div 3</div>

  <br>

  <span id=”span-0″>span 1</span>

  <span id=”span-1″>span 2</span>

  <span id=”span-2″>span 3</span>

</body>

body { font-family: “Arial”; }

div, span {

  background-color: #2e3f50;

  border-radius: 5px;

  display: inline-block;

}

div { color: #fd8f59; }

span { color: #1ebda5; }

Kết quả hiển thị:

display css - itviec blog

display: none

Khi đặt thuộc tính display của một phần tử thành none, phần tử sẽ biến mất hoàn toàn khỏi trang và không ảnh hưởng đến bố cục. Điều này cũng khiến trình đọc màn hình không truy cập được phần tử đó.

Ví dụ về display: none;

HTML CSS

<body>

  <div id=”div-0″>div 1</div>

  <div id=”div-1″>div 2</div>

  <div id=”div-2″>div 3</div>

  <br>

  <span id=”span-0″>span 1</span>

  <span id=”span-1″>span 2</span>

  <span id=”span-2″>span 3</span>

</body>

body { font-family: “Arial”; }

div, span {

  background-color: #2e3f50;

  border-radius: 5px;

  display: none;

}

div { color: #fd8f59; }

span { color: #1ebda5; }

Kết quả hiển thị:

display css - itviec blog

display: table

Thuộc tính display: table được sử dụng để hiển thị một phần tử HTML như một bảng. Có nghĩa là, khi bạn áp dụng thuộc tính này cho một phần tử, nó sẽ tạo ra một bảng với một hàng và một cột duy nhất, trong đó phần tử được đặt trong ô bảng.

Trước khi có  Flex, Float, Grid, display: table được sử dụng rất phổ biến. Tuy nhiên hiện nay, với các thuộc tính hữu dụng vừa liệt kê, bạn sẽ không còn dùng display: table nhiều.

Ví dụ về display: table;

HTML CSS

<div class=”table-container”>

    <div>

      <div>STT</div>

      <div>Họ và tên</div>

      <div>Email</div>

    </div>

    <div>

      <div>1</div>

      <div>Nguyễn Văn A</div>

      <div>nguyenvana@gmail.com</div>

    </div>

    <div>

      <div>2</div>

      <div>Trần Thị B</div>

      <div>tranthib@gmail.com</div>

    </div>

  </div>

    .table-container {

      display: table;

      border: 1px solid #ccc;

      padding: 10px;

    }

    .table-container > div

      border-bottom: 1px solid #ccc;

    }

    .table-container > div > div

      padding: 5px;

      text-align: center;

    }

Kết quả hiển thị:

display css - itviec blog

display: flex

Thuộc tính display: flex được sử dụng để tạo bố cục flexbox cho các phần tử HTML. Flexbox là một mô hình bố cục linh hoạt cho phép bạn sắp xếp các phần tử theo nhiều cách khác nhau, chẳng hạn theo chiều ngang, chiều dọc hoặc cả hai hướng.

Ví dụ về display: flex;

HTML CSS

<div class=”container”>

      <div class=”child”>

        Lorem ipsum dolor sit amet consectetur adipisicing elit.

        <span>This is an inline element</span> Modi eaque debitis eos quodlabore maiores delectus asperiores voluptatem voluptas soluta!

      </div>

      <div class=”child”>

        Lorem ipsum dolor sit amet consectetur adipisicing elit.

        <span>This is an inline element</span> Modi eaque debitis eos quodlabore maiores delectus asperiores voluptatem voluptas soluta!

      </div>

</div>

.container {

        display: flex;

        align-items: center;

        justify-content: center;

        height: 100vh;

        font-size: 2rem;

}

span {

       visibility: hidden;

       background-color: #006100;

       width: 140px;

       height: 140px;

}

.child {

       border: 2px solid crimson;

       margin: 4px;

}

Kết quả hiển thị:

display css - itviec blog

display: grid

Trong CSS, display: grid là một thuộc tính được sử dụng để tạo bố cục dạng lưới cho các phần tử HTML. Grid layout là một mô hình linh hoạt cho phép bạn sắp xếp các phần tử theo hàng, cột hoặc cả hai. So với các mô hình bố cục truyền thống như display: table và display: flex, grid layout dễ sử sụng và có hiệu suất tốt hơn.

Ví dụ về display: grid;

HTML CSS

<div class=”container”>

      <div class=”child”>

        Lorem ipsum dolor sit amet consectetur adipisicing elit.

        <span>This is an inline element</span> Modi eaque debitis eos quodlabore maiores delectus asperiores voluptatem voluptas soluta!

      </div>

      <div class=”child”>

        Lorem ipsum dolor sit amet consectetur adipisicing elit.

        <span>This is an inline element</span> Modi eaque debitis eos quodlabore maiores delectus asperiores voluptatem voluptas soluta!

      </div>

</div>

.container {

        display: grid;

        place-items: center;

        height: 100vh;

        font-size: 2rem;

      }

   

span {

       visibility: hidden;

       background-color: #006100;

       width: 140px;

        height: 140px;

}

.child {

       border: 2px solid crimson;

       margin: 4px;

}

Kết quả hiển thị:

display css - itviec blog

display: list-item

Các phần tử được gán display: list-item hoạt động giống như các phần tử <li> . Toàn bộ phần tử trở thành phần tử cấp khối, văn bản bên trong trở thành phần tử nội tuyến riêng và có dấu hiển thị đầu dòng (bullet point).

Ví dụ về display:list-item;

HTML CSS

<body>

  <div id=”div-0″>div 1</div>

  <div id=”div-1″>div 2</div>

  <div id=”div-2″>div 3</div>

  <br>

  <span id=”span-0″>span 1</span>

  <span id=”span-1″>span 2</span>

  <span id=”span-2″>span 3</span>

</body>

body { font-family: “Arial”; }

div, span {

  background-color: #2e3f50;

  padding: 10px;

  border-radius: 5px;

  display: list-item;body { font-family: “Arial”; }

div, span {

  background-color: #2e3f50;

  padding: 10px;

  border-radius: 5px;

  display: list-item;

  margin-left: 30px;

}

div { color: #fd8f59; }

span { color: #1ebda5; }

  margin-left: 30px;

}

div { color: #fd8f59; }

span { color: #1ebda5; }

Kết quả hiển thị:

display css - itviec blog

display: contents

Trong CSS, display: contents là một giá trị thuộc tính display tương đối mới, được giới thiệu trong CSS Spec Level 3. Khi bạn áp dụng display: contents cho một phần tử, trình duyệt sẽ thay thế phần tử đó bằng nội dung trực tiếp của nó.

Điều này có nghĩa là bất kỳ phần tử con nào của phần tử được đặt display: contents sẽ được di chuyển lên một cấp và hiển thị trực tiếp trong bố cục.

Ví dụ về display: contents;

HTML CSS

<div class=”content”>

    <div class=”inner”>

        <p>Đây là inner box. Nếu hiển thị: Nội dung chạy trong trình duyệt của bạn, bạn sẽ thấy một hộp full width có viền màu đỏ.</p>

        <p>Nếu hiển thị: Nội dung không chạy hoặc nếu bạn xóa thuộc tính display khỏi .content, bạn sẽ thấy một hộp 400 pixel có viền và màu nền màu xám, bên trong sẽ được lồng hộp có viền màu đỏ.</p>

    </div>

</div>

.content {

  border: 2px solid #999;

  background-color: #ccc;

  border-radius: 5px;

  padding: 10px;

  width: 400px;

  display: contents;

}

.inner {

  border: 2px solid red;

  border-radius: 5px;

  padding: 10px;

}

Kết quả hiển thị:

display css - itviec blog

Các câu hỏi thường gặp về display CSS

Sự khác biệt giữa display:inline-flex và display:flex trong CSS là gì?

Cả hai thuộc tính display: inline-flex và display: flex đều được sử dụng để tạo bố cục. Tuy nhiên cả hai vẫn có những điểm khác biệt trong cách hoạt động.

display: inline -flex display: flex
Hoạt động như một phần tử nội tuyến  Hoạt động như một phần tử khối 
Chỉ chiếm không gian cần thiết theo yêu cầu của nội dung của nó. Chiếm tất cả chiều rộng của vùng chứa nó.
Đặt trục chéo thành dọc. Có thể có trục ngang hoặc dọc.
Thường được sử dụng cho các thành phần cấp khối như nút, menu điều hướng, v.v. Thường được sử dụng cho các phần tử cấp khối như div, phần, v.v.

Sự khác biệt giữa display: inline và display: inline-block trong CSS là gì?

Inline Inline-block
Chiều rộng và chiều cao của màn hình không thay đổi các phần tử display: inline. Chiều rộng và chiều cao của màn hình có thể điều chỉnh các phần tử inline-block.
Inline có thể có phần đệm và lề theo chiều ngang, không có đệm và lề theo chiều dọc. Inline-block có thể có phần đệm và lề ở cả bốn hướng.
Inline không thể có phần tử khối con. Chỉ có thể chứa các phần tử inline khác (chữ, hình ảnh, v.v.). Inline-block có thể chứa một phần tử con là khối. Có thể chứa các phần tử con bất kỳ (inline hoặc block).

Tổng kết

Sử dụng thành thạo thuộc tính display giúp bạn thiết kế được những trang web có bố cục  hấp dẫn, cách hiển thị các phần tử trong CSS cũng được kiểm soát cao hơn. Hy vọng bài viết này sẽ là tài liệu tham khảo hữu ích cho bạn trong quá trình tìm hiểu và thực hành display CSS.

Tham khảo các bài viết thuộc chủ đề CSS trên ITviec: