Cara Membuat Box dengan CSS

bundet

Terdapat 5 properti dasar untuk mendefinisikan “Box” pada CSS:

Display
Width dan Height
Padding
Margins
Border

Mendefinisikan Dimensi Model Box dengan CSS

Seluruh elemen HTML dapat dianggap sebagai blok. Dalam CSS, istilah “box model” digunakan ketika kita berbicara tentang desain dan layout.

Box CSS merupakan dasar sebuah kotak yang membungkus elemen HTML tertentu, dan terdiri dari; margin, border, padding, dan contentnya.

1. Total Dimensi

Lebar sebenarnya atau tinggi objek merupakan total dari content width, padding, borders, dan margins.

.size-me {
width: 200px;
padding: 10px;
border: 2px;
margin: 20px;
}

Maka lebar sebenarnya adalah 254px, dengan rincian sebagai berikut:

content: 200px
padding-left: 10px
padding-right: 10px
border-right: 2px
border-left: 2px
margin-right: 20px
margin-left: 20px

2. Display Property

Secara default, elemen html Anda memiliki display property, baik itu secara inline maupun block.

Elemen blok mengambil ukuran lebar yang tersedia, dan memaksa baris di atasnya maupun di bawahnya. Contoh termasuk <p>, <div>, <ul>, <blockquote> dan semua header.

Inline elements dapat dimasukkan ke dalam blok elemen atau inline elemen lain dan tidak perlu menciptakan ruang tambahan atau baris jeda. Contoh: <img>, <em>, <strong>, <a>, dan <span>.

Ada 4 nilai yang dapat Anda berikan untuk display property:

display: block;
display: inline;
display: inline-block;
display: none;

display: inline-block adalah nilai khusus yang memungkinkan suatu elemen tetap inline terhadap unsur elemennya, namun Anda tetap bisa mengontrol dimensi tersebut seolah-oleh elemen blok.

display: none; (nilai yang digunakan untuk menghapus elemen).

Contoh:

Secara default, suatu elemen <li> berguna untuk mengatur display: block. Jika kita ingin mengaturnya dengan css, maka perlu melakukan hal seperti berikut ini:

STYLE (CSS)

li {display: inline-block;}

Selanjutnya lakukan perubahan pada elemen htmlnya, sebagaimana di bawah ini:

HTML

3. Mendefinisikan Dimensi: width dan height

Anda dapat mengatur lebar dan tinggi setiap elemen yang memiliki display property seperti block atau inline-block. Seperti halnya typem, Anda dapat mengatur dimensi dalam pixel (px), ems, atau persentase (%). Setiap pengaturan lebar dengan pixel disebut sebagai fixed-width, sementara pengaturan lebar dengan ems atau persentasi disebut dengan flexible-width.

4. Mendefinisikan Dimensi: min- dan max-

Alih-alih mendefinisikan secara absolut lebar dan tinggi suatu elemen, Anda juga dapat mengaturnya menggunakan maksimum / minimun. Hal ini memungkinkan elemen Anda lebih fleksibel terhadap browser atau elemen induknya. Ide membuat konten fleksibel sehingga bisa menyesuaikan diri terhadap browser pengguna / perangkat yang digunakan merupakan inti dari APA YANG DISEBUT DENGAN DESAIN RESPONSIF.

5. Mendefinisikan Dimensi: padding dan margin

Anda dapat mengatur suatu elemen menggunakan properti seperti padding dan margin di dalam css. Dimensi ini dapat juga diatur menggunakan nilai pixel, ems atau persentase (%).

.space-me {
padding: 10px;
margin-bottom: 20px;
}

6. Collapsing margins (runtuhan margin)

Ketika dua atau lebih margin collapse, maka lebar margin yang dihasilkan adalah “lebar maksimum collapsing margins”.

Pada contoh di bawah ini, margin box1 lebih tinggi dari box2, sehingga margin tidak bisa ditambahkan secara bersamaan.

7. CSS Shorthand

Ketika Anda ingin menyederhanakan pengaturan padding, margins dan borders, dimana, sebelumnya lebih boros line of code;

.box {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}

Menjadi lebih sederhana (irit line of code), seperti ini;

.box {
padding: 10px 15px 10px 15px;
}

Note: Hanya satu spasi yang digunakan untuk memisahkan antara setiap nilai!

Maka, nilainya ditunjukan sebagaimana arah jarum jam, sehingga (padding: top right bottom left). Berikut ilustrasinya:

Sementara itu, jika Anda ingin menghendaki nilai top dan bottom itu sama misal 10px, sedang left dan kiri juga sama misal 15px, maka cara mendeklarasikannya dengan gaya shorthand adalah sebagi berikut:

.box {
padding: 10px 15px;
}

Note: Hanya satu spasi yang digunakan untuk memisahkan antara setiap nilai!

Dimana nilai pertama berlaku untuk top dan bottom, sedangkan nilai kedua berlaku untuk left dan right. Berikut ilustrasiny:

8. Mendefinisikan border

Anda bisa membuat border di sekitar elemen menggunakan css. Anda bisa membuat perbatasan yang sama di setiap sisi-sisinya. Warna dan lebar border juga bisa Anda atur sesuai elemen yang dikehendaki.

Ada 3 properti yang bisa digunakan untuk mendefinisikan suatu border:

border-width: 1px;
border-style: solid; (dotted, dshed, etc)
border color: #666666;

Cara mendeklarasikan border juga dapat disederhanakan, contoh:

Sebelum

.box {
border-width: 1px;
border-style: solid;
border-color: #888888
}

Sesudah

.box {
border: 1px solid #888888;
}

Note: Hanya satu spasi yang digunakan untuk memisahkan antara setiap nilai!