Tata Letak CSS - inline-blok ~ KODELOVER

Tata Letak CSS - inline-blok

Nilai inline-blok

Membuat box supaya bisa berjejer ke samping sehingga menghasilkan tampilan grid sepertinya sulit namun sebenarnya sangatlah simple, yaitu hanya dengan menggunakan properti float. Namun, nilai inline-block juga dapat digunakan untuk menghasilkan tampilan grid, yaitu dengan menambahkan inline-block pada properti display. Elemen inline-block seperti elemen inline namun bisa memiliki lebar dan tinggi.

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

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

.after-box {
    clear: left;
}

Efek yang sama dapat dicapai dengan menggunakan nilai inline-block dari properti tampilan (perhatikan bahwa tidak ada properti yang jelas yang dibutuhkan):
Contoh

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

box float

Another box, after the box floates...

kedua contoh tersebut menghasilkan tampilan yang sama sehingga tinggal memilih pilih contoh 1 atau pun contoh dua karena keduanya menghasilkan output yang sama.

KODELOVER

Tata Letak CSS - inline-blok

Related Post