CSS inline-block

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    7 thg 11, 2022

  • Số lượt xem

    129 lượt xem


Advertisement

Display: inline-block

So với display: inline, sự khác biệt chính là display: inline-block cho phép thiết lập chiều rộng và chiều cao element.

Ngoài ra, với display: inline-block, margin/padding trên cùng và dưới cùng được cho phép, nhưng với display: inline thì không.

So với display: block, sự khác biệt chính là display: inline-block không thêm dấu ngắt dòng sau element, vì vậy element có thể nằm cạnh các element khác.

Ví dụ sau cho thấy sự khác nhau của display:  display: inline, display: inline-blockdisplay: block:

span.a {    display: inline; /* the default for span */    width: 100px;    height: 100px;    padding: 5px;    border: 1px solid blue;    background-color: yellow;  }    span.b {    display: inline-block;    width: 100px;    height: 100px;    padding: 5px;    border: 1px solid blue;    background-color: yellow;  }    span.c {    display: block;    width: 100px;    height: 100px;    padding: 5px;    border: 1px solid blue;    background-color: yellow;  }

 

Sử dụng inline-block tạo Navigation Links

Một cách sử dụng phổ biến để sử dụng display: inline-block là hiển thị các mục trong danh sách theo chiều ngang thay vì chiều dọc. Ví dụ sau tạo navigation links:

.nav {    background-color: yellow;    list-style-type: none;    text-align: center;     padding: 0;    margin: 0;  }    .nav li {    display: inline-block;    font-size: 20px;    padding: 20px;  }

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Tin tức mới

Tin tức thú vị

Nhà tài trợ: