CSS Layout - inline-block

Telah memungkinkan untuk waktu yang lama untuk membuat kotak kotak yang mengisi lebar peramban dan membungkus baik (ketika browser diubah ukurannya), dengan menggunakan properti float. Namun, nilai inline-blok properti layar membuatnya bahkan lebih mudah. elemen inline-block seperti elemen inline tetapi mereka dapat memiliki lebar dan tinggi.

Contoh Cara lama - menggunakan pelampung (perhatikan bahwa kita juga perlu menentukan properti yang jelas untuk elemen setelah kotak mengambang):

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

.after-box {
    clear: left;
}

Efek yang sama dapat dicapai dengan menggunakan nilai inline-blok properti display (perhatikan bahwa tidak ada properti yang jelas diperlukan):

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