Khóa học CSS - Bài 21 – Giá trị inline-block

Quay về MỤC LỤC TỰ HỌC CSS

Thuộc tính display:inline-block làm cho đối tượng có thuộc tính giống đối tượng inline nhưng có bề rộng và chiều cao.

Ví dụ 1: ta tạo các đối tượng float( kết hợp clear thẻ div ở cuối để chặn không cho nổi lên)

.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.after-box {
    clear: left;
}

Và các giá trị HTML trong phần body:

<h2>The New Way - using inline-block</h2>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="floating-box">Floating box</div>

<div class="after-box">Another box, after the floating boxes...</div>

Ví dụ 2: dùng thuộc tính display:inline-block -> ta không cần dùng thuộc tính clear chặn thẻ div “after-box” nổi lên nữa.

Thay các giá trị trong phần CSS như sau:

.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;
}

.after-box {
    border: 3px solid red;
}

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

Quay về MỤC LỤC TỰ HỌC CSS

Tác giả: #drM

Nguồn: Sưu Tầm