Gutters - Padding และ Margin สำหรับคอลัมน์ที่มีพื้นหลังหรือเส้นขอบ

อะไรคือแนวทางการออกแบบที่แนะนำสำหรับท่อระบายน้ำเมื่อคอลัมน์ (หรือกล่องหรือโมดูลรูปแบบใด ๆ ) มีรูปร่างที่ชัดเจนเพราะมีพื้นหลังหรือเส้นขอบเป็นของตัวเอง

โดยทั่วไปแล้วจะมีช่องว่างระหว่างขอบของกล่องและข้อความ แต่จะคิดในพื้นที่นี้ได้อย่างไร ด้วยการขยายกล่องหรือย่อขนาดตัวอักษร ?

เพื่อแสดงให้เห็นนี่คือตัวเลือก (แต่ไม่ใช่ทั้งหมด) ...

(นอกจากนี้ฉันสามารถใช้กริดใดก็ได้กับจำนวนคอลัมน์และความกว้างใด ๆ - นี่เป็นเพียงตัวอย่างเท่านั้น - คำถามจริงอาจถูกถามทุกครั้งที่เลย์เอาต์เลาะเลียบเลย์เอาต์)

ฉันผ่านกองการเขียนบนเลย์เอาต์ที่ใช้กริด แต่จนถึงตอนนี้ฉันเห็นเพียงอันเดียวที่จัดการเรื่องนี้: เขยิบองค์ประกอบของคุณโดย Khoi Vinh

ฉันพลาดอะไรไป หรือว่าไม่มีแนวทางที่ชัดเจน?

เนื่องจากหนึ่งในแรงจูงใจสำหรับการวางผังแบบกริดคือการเพิ่มความรู้สึกของการจัดระดับโลกฉันจึงคิดว่าใคร ๆ ก็สามารถโต้แย้งการตัดสินใจขึ้นอยู่กับสิ่งที่ต้องการการจัดตำแหน่งที่มากขึ้น กล่องหรือเนื้อหาของมัน?

Khoi Vinh ขอตัวเลือก 3 ในบทความของเขาเว้นแต่ว่าฉันไม่ได้อ่านผิด

ฉันพบว่าตัวเองกลับไปกลับมาระหว่างตัวเลือก 3 และตัวเลือก 6 ด้วยตัวเลือก 3 กล่องจะจัดตำแหน่ง แต่ข้อความของข้อความรู้สึกแคบ แต่การใช้ตัวเลือก 6 ทำให้จบลงด้วยการไม่จัดแนวกล่องหรือข้อความ (แม้ว่าอาจจะบอกว่ากึ่งกลางโดยนัยระหว่างขอบข้อความและเส้นขอบกล่องคือ 'สิ่ง' ที่จัดวางในขณะนี้)

ก้าวข้ามผ่านเว็บไม่มีการอ่านของฉันในการออกแบบหนังสือและศีลของการสร้างหน้าพูดเกี่ยวกับปัญหานี้อย่างใดอย่างหนึ่ง ฉันสามารถดูวิธีการทำงานของศีลสำหรับส่วนใหญ่ของ 'ตัวอักษรสีดำบนพื้นหลังที่ชัดเจน' การพิมพ์หนังสือ แต่หนึ่งนาทีเพิ่มสีให้กับรูปแบบหน้า (หรือกลับโครงร่างสีดำและสีขาว) คำถามรางน้ำกลับมา

อืมฉันเดาว่าคำถามคือ มีแนวทางใดบ้างสำหรับการเลือกระหว่างตัวเลือกที่ฉันแสดง - หรือว่าฉันได้ทำมากกว่ากฏหมายนักออกแบบและเป็นเรื่องเกี่ยวกับ'สิ่งที่มีลักษณะและความรู้สึกที่ดี' ?

เมื่อใดก็ตามที่คุณใช้กริดคุณต้องใช้มันอย่างสม่ำเสมอยกเว้นในกรณีที่คุณมีองค์ประกอบหนึ่ง (โดยปกติจะมีไม่เกินหนึ่งองค์ประกอบในหน้าหนึ่ง ๆ ) ละเมิดมันด้วยเหตุผลที่ดี - เพื่อทำให้โดดเด่นหรือเปลี่ยนอารมณ์ของหน้า . ความคมชัดจะต้องเป็นตัวหนาและพิจารณาอย่างชัดเจนเพื่อให้งานนี้ (โดย "งาน" ฉันหมายถึงมันไม่ได้ดูเหมือนผิดพลาด)

ตารางที่ปฏิบัติตามอย่างเคร่งครัดอยู่ในความสงบ มีความตึงเครียดเล็กน้อย สิ่งที่ปรากฏขึ้นที่ตาคาดว่าพวกเขาจะเป็นและผู้อ่านจะไม่สะดุ้งหรือทำให้รู้สึกอึดอัด

ในกรณีนี้หากพื้นหลังของคุณละเมิดกริดเล็กน้อยเช่นใน # 4 ดูเหมือนว่าผิดพลาด มันน่าอึดอัดใจ การขาดรางน้ำที่ขาดหายไปทำให้ฝูงชนกระแทกกับเสาอื่น ต่อข้อความที่เปิดกว้างซึ่งกำหนดความคาดหวังของการเปิดกว้างนี่เป็นความผิดที่ชัดเจน

0 ไม่มีความเปรียบต่างดังนั้นคอลัมน์ที่สองจะไม่แยกจากส่วนที่เหลือ ในบางสถานการณ์นั่นคือสิ่งที่คุณต้องการ

ตัวอย่าง "half-gutter" ใน # 5 และ # 6 กำหนดรางน้ำใหม่ทำให้แคบลง จริง ๆ แล้วพวกเขากำหนดตารางทั้งหมดในแนวนอนและแนวตั้งเพราะในกรณีนี้รางน้ำจะกลายเป็นเหมือนกับระยะห่างบรรทัด มันไม่ดีสำหรับข้อความด้วยตัวเอง แต่สามารถทำงานกับกล่อง อย่างไรก็ตามใน # 6 คุณมีพื้นที่สีขาวที่ไม่สมส่วนทั้งสองด้านของข้อความเมื่อเทียบกับด้านบนและด้านล่าง มันอึดอัดและอึดอัดเพราะมันไม่มีเหตุผล # 5 จะดีกว่าเพราะพื้นที่สีขาวมีการกระจายอย่างเท่าเทียมกัน ด้วยเหตุผลเดียวกัน # 3 จึงเหมาะสมกว่า # 2

โดยรวมแล้วฉันจะเห็นด้วยกับลอเรนและแนะนำ # 3 เป็นภาพที่ดีที่สุดของคุณ มันเป็นกรณีทั่วไปที่ดีที่สุดโดยไม่คำนึงถึงจำนวนคอลัมน์

มีกฎอยู่ พวกเขาสามารถถูกทำลายได้อย่างแน่นอนถ้าคุณมีเหตุผลที่ดี แต่ทุกครั้งที่คุณทำเช่นนั้นจะต้องเด็ดเดี่ยวกล้าหาญและชัดเจน "ตามที่ออกแบบไว้" Helvetica Black จับคู่กับ Georgia ทำงานเพราะแตกต่างกัน Trebuchet จับคู่กับ Verdana grates บนเส้นประสาทเพราะมันไม่แตกต่างกันพอ กล่องสีแดงสี่เหลี่ยมจัตุรัสขนาดใหญ่ที่ยาวหนึ่งคอลัมน์ครึ่งสามารถใช้งานได้ สีเทาปิดเล็กน้อยจะไม่

ฉันลงคะแนนให้กับตัวเลือก 3 ขอบของกล่องสีเทาคือสิ่งที่กำหนดคอลัมน์ในแนวตั้งดังนั้นเส้นเหล่านั้นจึงไม่สามารถละเมิดได้ (โดยไม่มีเหตุผล) รางควรจะเหมือนกันสำหรับทั้งสามคอลัมน์ดังนั้นใส่ข้อความไว้ในกล่องสีเทา ตัวเลือกที่ 2 ของส่วนฝังลึกเกินไปเล็กน้อย

นั่นคือสิ่งที่ฉันคุ้นเคยในการพิมพ์ดังนั้นมันจึงดู "ถูกต้อง" บนเว็บเช่นกัน

หากนี่คือการออกแบบเว็บฉันขอแนะนำอย่างยิ่งให้ไม่ใช้ช่องว่างภายในแนวนอนหากคุณกังวลเกี่ยวกับความสอดคล้องข้ามเบราว์เซอร์ เบราว์เซอร์ที่แตกต่างกันปฏิบัติต่อ divs และ padding แตกต่างกันมากพอที่การนำเสนอจะแตก

ไม่ว่าคุณจะไปทางไหนให้ใช้ระยะขอบในแนวนอนเท่านั้น มันต้องเพิ่มคลาสหรือสองเพื่อให้ได้เลย์เอาต์ที่แน่นอนที่คุณต้องการ (ตัวอย่างเช่นชุดมาร์จิ้นหนึ่งชุดสำหรับ div และอีกอันสำหรับย่อหน้า) แต่ในระยะยาวมันเชื่อถือได้มากขึ้น การขยายตัวในแนวตั้งโดยทั่วไปไม่ใช่ปัญหา