Spasi

Podcast CSS - 013: Spasi

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

Properti margin mungkin memberikan hal yang Anda butuhkan, tetapi juga mungkin menambahkan spasi tambahan yang tidak Anda inginkan. Misalnya, bagaimana cara Anda menargetkan hanya spasi di antara masing-masing elemen tersebut? Sesuatu seperti gap mungkin lebih tepat 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 jarak elemen. Elemen <br> dan <hr> memungkinkan Anda memberi spasi pada elemen ke arah blok, yang jika Anda menggunakan bahasa berbasis latin, adalah dari atas ke bawah.

Elemen <br> yang Anda gunakan akan membuat jeda baris, sama seperti saat Anda menekan tombol enter di pemroses kata.

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

Bersama dengan penggunaan elemen HTML, entitas HTML dapat menciptakan ruang. Entitas HTML adalah string karakter yang dicadangkan dan digantikan dengan entitas karakter oleh browser. Misalnya, jika Anda mengetik © di file HTML, Anda akan mengonversinya menjadi karakter ©. Entity   dikonversi menjadi karakter spasi yang tidak dapat dipisahkan, yang menyediakan ruang inline. Namun berhati-hatilah, karena aspek yang tidak dapat menyebabkan gangguan pada karakter ini menggabungkan kedua elemen tersebut, yang dapat menyebabkan perilaku aneh.

Margin

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

Singkatan margin menerapkan properti dalam urutan tertentu: atas, kanan, bawah, dan kiri. Anda dapat mengingat ini dengan masalah: 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, lalu nilai kedua akan diterapkan ke 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).

Margin dapat ditentukan 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 penampung elemen Anda memiliki lebar 250px dan elemen Anda memiliki nilai margin 20%: setiap sisi elemen akan memiliki margin yang dihitung sebesar 50px.

Anda juga dapat menggunakan nilai auto untuk margin. Untuk elemen tingkat blok dengan ukuran terbatas, margin auto akan menggunakan ruang yang tersedia sesuai arah penerapannya. Contoh yang bagus adalah yang satu ini, dari modul flexbox, tempat item saling menjauh.

Contoh bagus lainnya dari margin auto adalah wrapper yang dipusatkan secara horizontal yang memiliki lebar maksimum. Wrapper semacam ini sering digunakan untuk membuat kolom tengah yang konsisten pada sebuah {i>website<i}.

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

Di sini, margin 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 ruang antara elemen yang setara, hal ini akan mengurangi ruang di antara elemen tersebut. Hal ini dapat menyebabkan elemen tumpang-tindih, jika Anda mendeklarasikan nilai negatif yang lebih dari ruang yang tersedia.

Margin diciutkan

Penciutan margin adalah konsep yang rumit, tetapi ini adalah sesuatu yang sering Anda temui saat membangun antarmuka. Misalkan 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 akan berjarak 5em dari judul, karena 2rem dan 3rem digabungkan ke 5rem. Namun, karena margin vertikal diciutkan, ruang tersebut sebenarnya adalah 3rem.

Penciutan margin berfungsi dengan memilih nilai terbesar dari dua elemen yang berdekatan dengan margin vertikal yang ditetapkan pada sisi yang bersebelahan. Bagian bawah h1 bertemu bagian atas p, sehingga nilai terbesar dari margin bawah h1 dan margin atas p dipilih. Jika h1 memiliki 3.5rem dari margin bawah, ruang di antara keduanya akan menjadi 3.5rem karena 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, paragraf tersebut hanya akan membuat 20px ruang: 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 diposisikan secara mutlak, menggunakan position: absolute, margin tidak akan lagi diciutkan. Margin juga tidak akan diciutkan jika Anda menggunakan properti float.

Jika Anda memiliki elemen tanpa margin di antara dua elemen dengan margin blok, margin juga tidak akan diciutkan, karena dua elemen dengan margin blok tidak lagi seinduk yang seinduk: keduanya hanya seinduk.

Dalam pelajaran tata letak, Anda telah mengetahui bahwa container flexbox dan petak sangat mirip dengan container blok, tetapi menangani elemen turunannya dengan cara yang sangat berbeda. Hal ini juga terjadi dengan penciutan margin.

Jika kita mengambil contoh asli dari pelajaran dan menerapkan flexbox dengan arah kolom, margin akan digabungkan, bukan diciutkan. Hal ini dapat memberikan prediktabilitas dengan pekerjaan tata letak, yang merupakan tujuan desain container flexbox dan petak.

Penciutan margin dan margin mungkin sulit dipahami, tetapi memahami cara kerjanya, secara mendetail, sangat berguna, jadi penjelasan mendetail ini sangat disarankan.

Padding

Daripada membuat ruang di luar kotak, seperti yang dibuat margin, properti padding akan membuat ruang di dalam kotak Anda: seperti insulasi.

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

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

Mengenal

Hal ini juga dibahas dalam modul tata letak, jika Anda menetapkan nilai untuk position selain static, Anda dapat menempatkan elemen dengan properti top, right, bottom, dan left. Ada beberapa perbedaan tentang bagaimana nilai arah ini berperilaku:

• Elemen dengan position: relative akan mempertahankan posisinya dalam alur dokumen, bahkan saat Anda menetapkan 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 berada dalam status terpasang ke dok/terhenti.

Dalam modul properti logis, Anda mempelajari properti inset-block dan inset-inline, yang memungkinkan Anda menetapkan nilai arah yang mengikuti mode penulisan.

Kedua properti adalah singkatan yang menggabungkan nilai start dan end, sehingga menerima satu nilai yang akan ditetapkan untuk start dan end atau dua nilai individual.

Petak dan flexbox

Terakhir, di petak dan flexbox, Anda dapat menggunakan properti gap untuk membuat ruang di antara elemen turunan. Properti gap adalah singkatan dari row-gap dan column-gap, yang menerima satu atau dua nilai, yang dapat berupa panjang atau persentase. Anda juga dapat menggunakan kata kunci seperti unset, initial, dan inherit. Jika Anda hanya menentukan 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 petak, Anda juga dapat membuat ruang menggunakan kemampuan distribusi dan penyelarasannya, yang akan kita bahas dalam modul petak dan modul flexbox.

Menciptakan jarak yang konsisten

Sebaiknya pilih strategi dan tetap ikuti strategi tersebut untuk membuat antarmuka pengguna yang konsisten dengan alur dan ritme yang baik. Cara yang baik untuk mencapai hal ini adalah menggunakan langkah-langkah yang konsisten untuk jarak Anda.

Misalnya, Anda dapat berkomitmen untuk menggunakan 20px sebagai ukuran yang konsisten untuk semua celah di antara elemen—yang dikenal sebagai gutter—sehingga semua tata letak terlihat dan terasa konsisten. Anda juga dapat memutuskan untuk menggunakan 1em sebagai spasi vertikal antar-konten flow, yang akan mencapai spasi yang konsisten berdasarkan font-size elemen. Apa pun pilihan Anda, Anda harus menyimpan nilai ini sebagai variabel (atau properti khusus CSS) untuk membuat token nilai tersebut dan membuat konsistensi 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 menentukannya sekali, lalu menggunakannya di seluruh CSS. Saat diperbarui, baik secara lokal dalam elemen atau secara global, nilai akan diteruskan melalui menurun dan nilai yang diperbarui akan tercermin.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang jarak