Saya sedang membangun tema block (FSE) untuk sebuah situs klien, dan hero-nya dirancang untuk mulai flush di puncak viewport: full-bleed, nav mengambang di atasnya, tanpa jeda. Tapi begitu saya buka di browser, ada strip putih tipis sekitar 24px terselip di antara nav situs dan section hero. Bukan garis besar, tapi cukup untuk merusak efek "nav melayang di atas gambar" yang saya kejar.
Refleks pertama saya jelek, seperti biasa. Saya kira ada margin liar di section hero-nya sendiri, jadi saya buka DevTools dan mulai menghapus margin di elemen hero satu per satu. Tidak ada yang berubah. Strip putihnya keras kepala. Saya cek padding di header template-part, cek margin di <main>, cek section pertama. Setiap kali saya klik elemennya, DevTools menyorot ruang kosong itu tapi tidak menunjuk siapa yang membuatnya. Rasanya seperti margin hantu.
Kenapa ini terjadi
Kuncinya ketemu waktu saya berhenti melihat elemen individual dan mulai melihat overlay box-model di sekitar sambungan header-dan-main. Ruang 24px itu bukan padding, itu margin-top. Dan angka 24px itu familiar: itu nilai --wp--style--block-gap bawaan.
WordPress block layout menyuntikkan gap default lewat --wp--style--block-gap. Gap itu tidak cuma tinggal di dalam satu container. Dia merambat sebagai margin-top di antara elemen bersaudara pada level layout block, termasuk antara header template-part dan <main> yang mengikutinya, lalu lagi antara <main> dan anak-anak langsungnya. Jadi hero saya bukan cuma di-push turun sekali, dia di-push oleh block-gap yang mengalir turun di sepanjang rantai: template-part ke main, lalu main ke section pertama.
Ini yang bikin dia terasa seperti hantu. Tidak ada satu aturan CSS di stylesheet saya yang menuliskan margin-top: 24px. Angkanya lahir dari sistem block theme.json dan disuntik lewat custom property, jadi di DevTools dia muncul sebagai margin "computed" tanpa sumber yang bisa saya klik di file saya sendiri. Saya mencari pelaku di tempat yang salah karena pelakunya bukan kode saya, tapi default WordPress.
Perbaikannya
Solusinya bukan mengubah --wp--style--block-gap secara global, karena gap itu berguna di tempat lain, di dalam konten. Solusinya adalah menolkan margin block-default secara bedah, tepat di rantai yang mendorong hero turun, dan membiarkan sisanya utuh.
Rantai yang harus saya targetkan ada tiga sambungan: sibling template-part-plus-main, main itu sendiri beserta anak-anak langsungnya, dan section pertama. Saya set margin-top dan margin-block-start ke 0 di semuanya, plus gap: 0 di main:
.wp-site-blocks > .wp-block-template-part + main,
main.page_wrap,
main.page_wrap > .page_main,
.page_wrap > * {
margin-top: 0 !important;
margin-block-start: 0 !important;
}
main.page_wrap {
gap: 0;
}
.page_main > section:first-child {
margin-top: 0 !important;
}Kenapa margin-block-start juga, bukan cuma margin-top? Karena block layout kadang menuliskan margin logis (margin-block-start), bukan margin fisik. Kalau saya cuma menolkan margin-top, aturan logis bisa menang dan strip-nya bertahan. Menolkan keduanya menutup dua jalur sekaligus.
Kenapa !important? Karena nilai block-gap disuntik dengan spesifisitas yang tinggi lewat selector yang di-generate WordPress. Di sini !important bukan malas, tapi memang cara paling bersih untuk menang dari aturan yang saya tidak kontrol sumbernya.
Setelah aturan ini masuk, saya cek ulang. Hero-nya sekarang mulai persis di rect.y = 0, flush dengan puncak viewport, dan nav mengambang di atasnya persis seperti desain. Strip putih hantunya hilang total.
Pelajaran
Ketika ada ruang kosong misterius di tema block dan tidak ada elemen tunggal yang mengaku sebagai penyebabnya, curigai --wp--style--block-gap lebih dulu. Block layout WordPress menyuntikkan margin default di antara sibling di level layout, jadi ruang itu sering muncul di sambungan struktural, header-ke-main, main-ke-anak, bukan di dalam komponen yang kamu tulis sendiri. Jangan buang waktu menghapus margin di komponen; targetkan rantai sambungan struktural, nolkan margin-top dan margin-block-start sekaligus, dan set gap: 0 di main kalau perlu. Sejak itu, saat ada strip putih 24px yang tidak masuk akal, saya tidak lagi mencari margin liar di CSS saya, saya langsung tanya: apakah ini block-gap?