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 adalahleft
danright
, dan nilai ketiga adalahbottom
. (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
Jika dua elemen yang ditumpuk di atas satu sama lain memiliki margin atas 20 piksel dan margin bawah 30 piksel, berapa banyak ruang di antara elemen tersebut?
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
HTML untuk spasi aman digunakan bila...
Untuk membuat ruang di dalam kotak, gunakan...
Untuk membuat ruang di luar kotak, gunakan...
Untuk membuat ruang di antara kotak, gunakan...