Talang - Padding dan Margin untuk Kolom dengan Latar Belakang atau Perbatasan

Apa pedoman desain yang disarankan untuk talang ketika kolom (atau kotak, atau modul tata letak apa pun) memiliki bentuknya yang terlihat jelas karena memiliki latar belakang atau tepian sendiri?

Biasanya seseorang akan menempatkan ruang di antara tepi kotak dan teksnya. Tapi dari mana menyulap ruang ini? Dengan memperluas kotak, atau menyusutkan teks ?

Sebagai ilustrasi, berikut adalah beberapa (tetapi tidak semua) opsi ...

(Juga, saya bisa menggunakan kisi apa saja dengan sejumlah kolom, dan lebar apa pun - ini hanya berfungsi sebagai contoh - pertanyaan yang sebenarnya bisa ditanyakan setiap kali tata letak melintasi talang.)

Saya telah melalui setumpuk tulisan pada tata letak berbasis grid, tetapi sejauh ini saya telah melihat satu yang membahas masalah ini: Nudge Your Elements oleh Khoi Vinh.

Apa yang saya lewatkan? Atau apakah tidak ada pedoman yang jelas?

Karena salah satu motivasi untuk tata letak berbasis grid adalah untuk meningkatkan rasa keberpihakan global, saya kira orang bisa berargumen keputusan tergantung pada apa yang menuntut lebih banyak keselarasan; kotak, atau isinya?

Kecuali saya salah membaca, Khoi Vinh berpendapat untuk opsi 3 dalam artikelnya.

Saya menemukan diri saya bolak-balik antara opsi 3 dan opsi 6. Dengan opsi 3 kotak disejajarkan, tetapi teksnya terasa sempit. Tetapi dengan menggunakan opsi 6, seseorang berakhir dengan tidak ada kotak atau teks yang disejajarkan (meskipun orang mungkin mengatakan tengah implisit antara tepi-teks dan batas-kotak adalah 'hal' yang sekarang disejajarkan).

Melangkah melampaui web, tidak ada bacaan saya tentang desain buku dan kanon konstruksi halaman yang membicarakan masalah ini juga. Saya bisa melihat bagaimana kanon bekerja untuk sebagian besar pencetakan buku 'huruf hitam pada latar belakang yang jelas', tetapi begitu satu menambahkan warna ke tata letak halaman (atau membalikkan skema hitam-putih), pertanyaan selokan kembali.

Mmm, saya kira pertanyaannya adalah; Adakah pedoman untuk memilih antara opsi yang saya ilustrasikan - atau sudahkah saya memberanikan diri melampaui hukum perancang dan apakah masalahnya hanya tentang 'apa yang terlihat dan terasa baik' ?

Setiap kali Anda menggunakan kisi, Anda harus menggunakannya secara konsisten kecuali di mana Anda memiliki satu elemen (biasanya tidak lebih dari satu pada halaman tertentu) melanggarnya untuk alasan yang baik - untuk membuatnya menonjol atau untuk mengubah mood halaman . Kontras harus berani dan jelas disengaja untuk membuat pekerjaan ini. (Dengan "bekerja", maksudku itu tidak terlihat seperti kesalahan.)

Sebuah kotak, diikuti dengan ketat, adalah damai. Ada sedikit jika ada ketegangan; hal-hal muncul di mana mata mengharapkan mereka, dan pembaca tidak pernah terkejut atau dibuat merasa tidak nyaman.

Dalam hal ini, jika latar belakang Anda melanggar kisi sedikit, seperti pada # 4, itu terlihat seperti kesalahan. Canggung. Kekurangan total selokan memadati kotak terhadap kolom lainnya. Melawan petunjuk terbuka teks, yang menetapkan ekspektasi keterbukaan, ini jelas salah.

0 tidak memberikan kontras, sehingga kolom kedua tidak dibedakan dari yang lain. Dalam beberapa keadaan itulah yang Anda inginkan.

Contoh "setengah-selokan" di # 5 dan # 6 mendefinisikan ulang selokan, menjadikannya lebih sempit. Mereka benar-benar mendefinisikan ulang seluruh grid secara horizontal dan vertikal, karena dalam hal ini selokan berakhir persis sama dengan jarak garis. Itu buruk untuk teks dengan sendirinya, tetapi dapat bekerja dengan kotak. Di # 6, Anda memiliki ruang putih yang tidak proporsional di kedua sisi teks dibandingkan dengan bagian atas dan bawah. Itu canggung dan tidak nyaman karena tidak masuk akal. # 5 akan lebih disukai, karena ruang putih lebih merata. Untuk alasan yang sama, # 3 lebih disukai daripada # 2.

Secara keseluruhan, saya setuju dengan Lauren dan merekomendasikan # 3 sebagai pukulan terbaik Anda. Ini juga merupakan kasus umum terbaik, terlepas dari jumlah kolom.

Ada aturannya. Mereka pasti bisa rusak jika Anda memiliki alasan yang bagus, tetapi setiap kali Anda melakukannya harus memiliki tujuan, berani dan jelas "sebagaimana dirancang." Helvetica Black dipasangkan dengan karya Georgia karena mereka berbeda; Trebuchet dipasangkan dengan Verdana di saraf karena mereka tidak cukup berbeda. Kotak merah besar, kotak, yang membentang satu setengah kolom bisa bekerja; yang abu-abu sedikit off tidak akan.

Saya memilih Opsi 3. Tepi kotak abu-abu adalah apa yang menentukan kolom secara vertikal, sehingga garis-garis itu tidak dapat dilanggar (tanpa alasan). Talang harus sama untuk ketiga kolom, jadi sisipkan teks di dalam kotak abu-abu. Inset Opsi 2 agak terlalu dalam.

Itulah yang biasa saya lakukan di media cetak, sehingga terlihat "benar" di web juga.

Jika ini untuk desain web, saya akan sangat menyarankan agar Anda tidak menggunakan bantalan dalam arah horizontal jika Anda khawatir dengan konsistensi lintas-browser. Browser yang berbeda memperlakukan div dan padding cukup berbeda sehingga presentasi dapat rusak.

Kemana pun Anda pergi, gunakan margin secara horizontal saja. Itu membuat perlu menambahkan satu atau dua kelas untuk mendapatkan tata letak yang tepat yang Anda inginkan (misalnya satu set margin untuk div dan yang lain untuk paragraf), tetapi dalam jangka panjang, itu lebih bisa diandalkan. Padding vertikal umumnya tidak menjadi masalah.