Bố cục trong CSS – inline-block

Giá trị inline-block

Bạn có thể tạo các ô lưới trên chiều rộng của trình duyệt một cách thuận mắt bằng cách sử dụng thuộc tính float. Tuy nhiên điều này mất khá nhiều thời gian. Để đơn giản hơn, bạn nên dùng giá trị inline-block cho thuộc tính display.

Phần tử inline-block trông giống như phần tử inline nhưng chúng có thêm chiều rộng và chiều cao.

Ví dụ, cách làm cũ sử dụng float (lưu ý cần xác định rõ thuộc tính clear cho phần tử sau các hộp nổi):

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

.after-box {
    clear: left;
}

Cũng tạo ra hiệu ứng tương tự, nhưng bằng cách sử dụng giá trị inline-block cho thuộc tính display (không cần dùng thuộc tính clear):

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