Liên hệ
css

Thuộc tính display trong CSS

Dùng CSS dislay thiết lập cách hiện thị phần tử thành dạng inline, block, none ...

Thuộc tính display

Mọi phần tử trên trang đều có dạng hộp chữ nhật. Thuộc tính display quy định ứng xử của box này trên trang. Một phần tử dạng khối block nó chiếm toàn bộ độ rộng, với ngắt dòng trước và sau phần tử. Ví dụ sau sẽ chuyển phần tử <span> thành dạng block

<style>
    .spantoblock span {
        display: block;
        border: 1px dotted gray;
    }
</style>

<p class="spantoblock">
    <span>Đoạn văn 1.</span>
    <span>Đoạn văn 2.</span>
    <span>Đoạn văn 3.</span>
</p>

Đoạn văn 1. Đoạn văn 2. Đoạn văn 3.

Thiết lập display: inline

Phần tử có thuộc tính display: inline; sẽ chỉ có độ rộng phù hợp với nội dung phần từ và không có ngắt dòng trước và sau phần tử.

<style>
    .ptoinline p {
        display: inline;
        border-bottom: 1px dotted gray;
    }
</style>

<div class="ptoinline">
    <p>Đoạn văn 1.</p>
    <p>Đoạn văn 2.</p>
    <p>Đoạn văn 3.</p>
</div>

Đoạn văn 1.

Đoạn văn 2.

Đoạn văn 3.

Thiết lập thuộc tính display cho phần tử chỉ thay đổi cách phần tử đó hiện thị, bạn vẫn cần tuân thủ quy tắc HTML. Một phần tử gốc inline dù có thuộc tính display: block; vẫn không được phép chứa phần tử dạng gốc block : xem thêm HTML inline và block

display:none

display:none sẽ ẩn phần tử, nó không còn chiếm không gian nào trên trang. Ví dụ:

h1 {
   display: none;
}

Ngoài các giá trị block, inline, none ... thuộc tính display còn nhiều giá trị khác:

display: inline-block; bản thân phần tử hiện thị như inline nhưng bên trong phần tử lại ứng xử như block

display: list-item phần tử giống như <li>

Vui lòng đăng ký ủng hộ kênh