Spasi

Podcast CSS - 013: Spasi

Katakanlah Anda punya koleksi tiga kotak, ditumpuk di atas satu sama lain dan Anda membutuhkan ruang di antara mereka. Berapa banyak cara yang bisa Anda pikirkan untuk melakukannya di CSS?

Properti margin dapat memberikan apa yang Anda butuhkan, tetapi mungkin saja ada penambahan spasi yang tidak Anda inginkan. Misalnya, bagaimana Anda hanya menargetkan spasi di antara setiap elemen tersebut? Sesuatu seperti gap mungkin lebih sesuai dalam kasus ini. Ada banyak cara untuk menyesuaikan spasi dalam UI, masing-masing dengan kekuatan dan peringatannya sendiri.

Spasi HTML

HTML sendiri menyediakan beberapa metode untuk memberi ruang pada elemen. Elemen <br> dan <hr> memungkinkan Anda memberi jarak elemen dalam arah blok, yang jika Anda menggunakan bahasa latin, adalah dari atas ke bawah.

Jika Anda menggunakan elemen <br>, hal itu akan membuat {i>linebreak<i}, sama seperti ketika Anda menekan tombol {i>enter<i} di pengolah kata.

<hr> membuat garis horizontal dengan spasi di kedua sisi, yang dikenal sebagai margin.

Seiring dengan penggunaan elemen HTML, Entitas HTML dapat membuat ruang. Entitas HTML adalah string karakter yang dicadangkan dan diganti dengan entitas karakter oleh browser. Misalnya, jika Anda mengetik © di file HTML, itu akan dikonversi menjadi karakter ©. Entity   dikonversi menjadi karakter spasi yang tidak dapat terputus, yang menyediakan spasi inline. Berhati-hatilah, karena aspek yang tidak mengganggu dari karakter ini menggabungkan kedua elemen bersama-sama, yang dapat menghasilkan perilaku yang ganjil.

Margin

Jika Anda ingin menambahkan spasi di bagian luar elemen, gunakan properti margin. Margin seperti menambahkan bantalan di sekitar elemen Anda. Properti margin adalah singkatan dari margin-top, margin-right, margin-bottom, dan margin-left.

Singkatan margin menerapkan properti dalam urutan tertentu: atas, kanan, bawah, dan kiri. Anda dapat mengingatnya dengan sulit: TRouBLe.

Singkatan margin juga dapat digunakan dengan satu, dua, atau tiga nilai. Menambahkan nilai keempat memungkinkan Anda menetapkan setiap sisi. Hal ini diterapkan sebagai berikut:

• Satu nilai akan diterapkan ke semua sisi. (margin: 20px).
• Dua nilai: nilai pertama akan diterapkan ke sisi atas dan bawah, dan nilai kedua akan diterapkan di sisi kiri dan kanan. (margin: 20px 40px)
• Tiga nilai: nilai pertama adalah top, nilai kedua adalah left dan right, dan nilai ketiga adalah bottom. (margin: 20px 40px 30px).

{i>Margin<i} dapat didefinisikan dengan panjang, persentase atau nilai otomatis, seperti 1em atau 20%. Jika Anda menggunakan persentase, nilai akan dihitung berdasarkan lebar blok penampung elemen Anda.

Artinya, jika blok yang memuat elemen Anda memiliki lebar 250px dan elemen Anda memiliki nilai margin 20%: setiap sisi elemen Anda akan memiliki margin yang dihitung sebesar 50px.

Anda juga dapat menggunakan nilai auto untuk margin. Untuk elemen tingkat blok dengan ukuran yang dibatasi, margin auto akan menggunakan ruang yang tersedia ke arah penerapannya. Contoh yang bagus adalah yang satu ini, dari modul flexbox, tempat item didorong satu sama lain.

Contoh bagus lainnya dari margin auto adalah wrapper yang berpusat secara horizontal yang memiliki lebar maksimum. Wrapper semacam ini sering digunakan untuk membuat kolom tengah yang konsisten di situs.

.wrapper {
    max-width: 400px;
    margin: 0 auto;
}

Di sini, {i>margin<i} dihapus dari sisi atas dan bawah (blok), dan auto berbagi ruang antara sisi kiri dan kanan (inline).

Margin negatif

Nilai negatif juga dapat digunakan untuk margin. Alih-alih menambahkan spasi di antara elemen yang berdekatan, tindakan ini akan mengurangi ruang di antara keduanya. Hal ini dapat mengakibatkan elemen yang tumpang tindih, jika Anda mendeklarasikan nilai negatif yang lebih besar dari ruang yang tersedia.

Margin diciutkan

Penciutan margin adalah konsep yang rumit, tetapi ini adalah sesuatu yang akan sering Anda temui saat membangun antarmuka. Katakanlah Anda memiliki dua elemen: judul dan paragraf yang keduanya memiliki margin vertikal:

<article>
  <h1>My heading with teal margin</h1>
  <p>A paragraph of text that has blue margin on it, following the heading with margin.</p>
</article>

h1 {
    margin-bottom: 2rem;
}

p {
    margin-top: 3rem;
}

Secara sekilas, Anda akan dimaafkan jika berpikir bahwa paragraf tersebut akan diberi spasi 5em dari judul, karena 2rem dan 3rem digabungkan untuk menghitung 5rem. Namun, karena margin vertikal diciutkan, ruang sebenarnya adalah 3rem.

Penciutan margin bekerja dengan memilih nilai terbesar dari dua elemen yang bersebelahan dengan margin vertikal di semua sisi yang bersebelahan. Bagian bawah h1 bertemu bagian atas p, sehingga nilai terbesar dari margin bawah h1 dan margin atas p akan dipilih. Jika h1 memiliki margin bawah 3.5rem, ruang di antara keduanya kemudian akan menjadi 3.5rem karena itu lebih besar dari 3rem. Hanya margin blok yang diciutkan, bukan margin inline (horizontal).

Penciutan margin juga membantu elemen kosong. Jika Anda memiliki paragraf yang memiliki margin atas dan bawah 20px, tindakan ini hanya akan membuat ruang sebesar 20px: bukan 40px. Namun, jika apa pun ditambahkan ke bagian dalam elemen ini, termasuk padding, marginnya tidak akan lagi diciutkan dengan sendirinya dan akan diperlakukan sebagai kotak dengan konten.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang penciutan margin

Mencegah penciutan margin

Jika Anda membuat elemen yang benar-benar diposisikan, menggunakan position: absolute, margin tidak akan lagi diciutkan. Margin juga tidak akan diciutkan jika Anda menggunakan properti float juga.

Jika Anda memiliki elemen tanpa margin antara dua elemen dengan {i>block margin<i}, margin juga tidak akan menciutkan, karena dua elemen dengan margin blok tidak lagi bersaudara: keduanya hanya seinduk.

Dalam pelajaran tata letak, Anda mengetahui bahwa kontainer {i>flexbox<i} dan {i>grid<i} sangat mirip dengan kontainer blok, tetapi menangani elemen turunannya dengan sangat berbeda. Hal ini juga terjadi dengan penciutan margin.

Jika kita mengambil contoh asli dari pelajaran itu dan menerapkan {i>flexbox<i} dengan arah kolom, {i>margin<i} digabungkan, bukan diciutkan. Fungsi ini dapat memberikan prediktabilitas terhadap pekerjaan tata letak, untuk itulah kontainer flexbox dan grid.

Margin dan penciutan margin bisa sulit dipahami, tetapi memahami cara kerjanya, secara mendetail, sangat berguna, jadi penjelasan mendetail ini sangat dianjurkan.

Padding

Alih-alih menciptakan ruang di luar kotak, seperti yang dilakukan margin, properti padding membuat ruang di bagian dalam kotak Anda: seperti insulasi.

Tergantung pada model kotak mana yang Anda gunakan—yang dibahas kembali dalam pelajaran model box —padding juga dapat memengaruhi dimensi elemen secara keseluruhan.

Properti padding adalah singkatan dari padding-top, padding-right, padding-bottom, dan padding-left. Sama seperti margin, padding juga memiliki properti logis: padding-block-start, padding-inline-end, padding-block-end, dan padding-inline-start.

Positioning

Juga dibahas dalam modul tata letak, jika Anda menetapkan nilai untuk position yang bukan static, Anda dapat memberi ruang pada elemen dengan properti top, right, bottom, dan left. Ada beberapa perbedaan dengan perilaku nilai arah ini:

• Elemen dengan position: relative akan mempertahankan posisinya dalam alur dokumen, bahkan ketika Anda menetapkan nilai-nilai ini. Mereka juga akan relatif terhadap posisi elemen Anda.
• Elemen dengan position: absolute akan mendasarkan nilai arah dari posisi induk relatif.
• Elemen dengan position: fixed akan mendasarkan nilai arah pada area pandang.
• Elemen dengan position: sticky hanya akan menerapkan nilai arah saat perangkat dalam status terpasang ke dok/tertahan.

Dalam modul properti logis, Anda akan mempelajari properti inset-block dan inset-inline, yang memungkinkan Anda menyetel nilai arah yang memenuhi mode penulisan.

Kedua properti ini adalah singkatan yang menggabungkan nilai start dan end sehingga terima salah satu nilai yang akan ditetapkan untuk start dan end atau dua nilai individu.

Petak dan flexbox

Terakhir, di petak dan flexbox, Anda dapat menggunakan properti gap untuk membuat ruang di antara elemen turunan. Properti gap adalah singkatan untuk row-gap dan column-gap, ia menerima satu atau dua nilai, yang dapat berupa panjang atau persentase. Anda juga dapat menggunakan kata kunci seperti unset, initial, dan inherit. Jika Anda menentukan hanya satu nilai, gap yang sama akan diterapkan ke baris dan kolom, tetapi jika Anda menentukan kedua nilai, nilai pertama adalah row-gap dan nilai kedua adalah column-gap.

Dengan flexbox dan grid, Anda juga bisa membuat ruang menggunakan kemampuan distribusi dan perataannya, yang akan kita bahas dalam modul grid dan modul flexbox.

Membuat spasi yang konsisten

Sebaiknya pilih satu strategi dan tetap gunakan untuk membantu Anda membuat antarmuka pengguna yang konsisten dengan alur dan ritme yang baik. Cara yang baik untuk mencapai hal ini adalah menggunakan ukuran yang konsisten untuk jarak Anda.

Misalnya, Anda dapat berkomitmen untuk menggunakan 20px sebagai ukuran yang konsisten untuk semua kesenjangan antarelemen—yang dikenal sebagai {i>gutter<i}—sehingga semua tata letak terlihat dan terasa konsisten. Anda juga dapat memutuskan untuk menggunakan 1em sebagai jarak vertikal antar-konten flow, yang akan mencapai spasi yang konsisten berdasarkan font-size elemen. Apa pun yang Anda pilih, Anda harus menyimpan nilai-nilai ini sebagai variabel (atau properti khusus CSS) untuk membuat token nilai tersebut dan membuat konsistensinya sedikit lebih mudah.

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

Menggunakan properti khusus seperti ini memungkinkan Anda untuk mendefinisikannya sekali, lalu gunakan di seluruh CSS Anda. Ketika diperbarui, baik secara lokal di dalam elemen atau secara global, nilai-nilai tersebut akan diturunkan melalui susunan dan nilai-nilai yang diperbarui akan tercermin.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang jarak