มีคำเฉพาะสำหรับท่อระบายน้ำแนวนอนหรือไม่?


12

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

คำถาม
"รางน้ำ" ดูเหมือนว่าคำที่ถูกต้องมากที่สุด แต่ส่วนมากของคำจำกัดความของ "ท่อ" ที่ฉันสามารถค้นหาเฉพาะหมายถึงช่องว่างระหว่างคอลัมน์

มีคำเฉพาะสำหรับช่องว่างระหว่างแถวหรือไม่? หรือมันเหมาะสมที่จะเพียงแค่เรียกพวกเขาว่า "ท่อระบายน้ำในแนวนอน"?

ตัวอย่าง
นี่คือภาพประกอบของสิ่งที่ฉันพยายามระบุ
(ภาพที่ยืมมาจากhttps://www.init.de/en/news/responsive-design )

ป้อนคำอธิบายรูปภาพที่นี่

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

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

ฉันเห็นคำว่า "รางน้ำ" ที่ใช้บ่อยในกรอบกริดตอบสนองดังนั้นฉันรู้ว่ามันเป็นคำที่ยอมรับได้ในการพัฒนาเว็บ ฉันแค่สงสัยว่ามีคำที่เหมาะสมกว่าสำหรับ "รางน้ำแนวนอน" หรือไม่


เป็นคำถามที่ดีฉันไม่รู้จักคำศัพท์นี้ อย่างไรก็ตามคำว่ารางน้ำมักถูกนำไปใช้ในทางที่ผิด ระยะห่างระหว่างคอลัมน์เรียกว่าถูกต้องซอย ดูภาพนี้เพื่อความกระจ่าง
Zach Saucier

คุณไม่ได้หมายถึงเป็นผู้นำที่นี่ใช่ไหม สิ่งที่เกี่ยวกับการเว้นวรรควรรค?
e100

บริบทคือทุกสิ่ง ในฐานะที่เป็นเสียงเหมือนโต๊ะผมขอแนะนำให้กู้ยืมเงินสิ่งที่คำศัพท์การใช้งาน MS Excel เมื่อมีการเลือกการจัดรูปแบบตัวเลือกสำหรับเซลล์สเปรดชีต (ฉันคิดว่ามันเป็น 'ช่องว่าง' IIRC)
DA01

สำหรับการเว้นวรรคย่อหน้าถ้าเราพูดถึงพื้นที่แนวนอนระหว่างย่อหน้าในคอลัมน์จริง ๆ ฉันเชื่อว่าคำที่นักออกแบบกราฟิกใช้คือ 'การเว้นวรรคย่อหน้า'
DA01

การเว้นวรรคของเซลล์ไม่ถูกต้องเนื่องจากจะเป็นการเพิ่มพื้นที่รอบนอกตาราง / ตาราง
JDB ยังคงจำโมนิก้าได้

คำตอบ:


3
คำตอบสั้น ๆ

ฉันจะใช้ "ระยะห่างระหว่างแถว"

คำตอบที่ยาว

ดังที่ JDB กล่าวถึงฉันก็อยากจะใช้คำที่เกี่ยวข้องกับเว็บแทนที่จะพยายามนำเข้าคำเรียงพิมพ์จากโลกสื่อสิ่งพิมพ์ที่น่าสนใจ

ฉันจะใช้คำว่า "การเว้นวรรคคอลัมน์" และ "การเว้นวรรคแถว" เนื่องจากโครงร่างกริดส่วนใหญ่ใช้คำว่า "คอลัมน์" และ "กริด" ฉันจะหลีกเลี่ยงการใช้คำว่า "margin" และ "padding" เพื่อหลีกเลี่ยงการปะทะกันกับคำหลัก CSS


1
CSS Grid ใหม่กำหนดgrid-row-gapและgrid-column-gapแต่ฉันชอบ "ระยะห่าง" ดีกว่านิดหน่อย
JDB ยังจำโมนิก้าได้

7

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

ฉันจะเรียกสิ่งนี้ว่า "มาร์จิ้นแนวตั้ง" เหมือนกับในคุณสมบัติ CSS margin ระยะขอบคือระยะห่างระหว่างเส้นขอบขององค์ประกอบที่อยู่ติดกัน (ตรงกันข้ามกับช่องว่างภายในซึ่งเป็นระยะห่างภายในองค์ประกอบระหว่างเส้นขอบและเนื้อหา)

ป้อนคำอธิบายรูปภาพที่นี่

ในคำพูดของ W3C:

มาร์จิ้นจะล้างพื้นที่รอบ ๆ องค์ประกอบ (นอกกรอบ) ระยะขอบไม่มีสีพื้นหลังและโปร่งใสอย่างสมบูรณ์ แหล่ง

โปรดสังเกตว่าเส้นขอบขององค์ประกอบสามารถโปร่งใสได้ ไม่จำเป็นต้องมองเห็น

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

การพูดนอกเรื่อง

Cellpaddingและcellspacingมีความคล้ายคลึงกับpaddingและmarginแต่มีความเฉพาะเจาะจงมากเกินไป เป็นแอตทริบิวต์ html ที่ถูกต้องของ<table>และ<td>แท็กซึ่งตรงข้ามกับแอตทริบิวต์ CSS ทั่วไป ไม่สามารถใช้กับแท็กอื่นได้ หากคุณกำลังพูดถึงเฉพาะตาราง (เช่นเดียวกับการสร้างโดยใช้<table>แท็ก) จากนั้นคุณจะถูกต้องถ้าคุณเรียกพื้นที่cellspacingนั้น หากคุณกำลังพูดคุยเกี่ยวกับพื้นที่สี่เหลี่ยมทั่วไป (เช่นในพื้นที่ที่กำหนดโดย<div>, <span>, <img>หรือแท็กอื่น ๆ ) จากนั้นmarginจะมีความถูกต้องมากขึ้น

เช่นเดียวกับความคิดเห็นด้านข้างโปรดสังเกตว่าcellpadingและcellspacingคุณลักษณะต่าง ๆ เป็นอย่างมากกับนักออกแบบและนักพัฒนาเว็บยุคใหม่เนื่องจากแอตทริบิวต์ประเภทนี้รวมโครงสร้าง (HTML) เข้ากับสไตล์ (CSS) ส่งผลให้หน้าเว็บที่ยากต่อการบำรุงรักษาและ / หรือพัฒนาโดย ทีม นักพัฒนามีกำลังใจที่จะละเว้นจากการใช้แอตทริบิวต์เหล่านี้และใช้แอตทริบิวต์แบบ CSS paddingและmarginแทน

เช่นเดียวกับการใช้ตารางเพื่อสร้างเค้าโครงทั่วไปตามที่เคยเป็น ครูสอนอ้างว่าควรใช้ตารางเพื่อแสดงข้อมูลแบบตารางเท่านั้น <div>และ<span>ควรใช้แท็กสำหรับนั่งร้าน ทั้งหมดนี้หวังว่าวันหนึ่งเราจะมีหน้าเว็บที่ถูกต้องทางความหมายคือแท็กทำเครื่องหมายบริบทที่มีความหมายซึ่งต่างจากการเป็นฉากหลังเท่านั้น


2
"Margin" เป็นคำทั่วไปหมายถึงช่องว่างรอบองค์ประกอบขณะที่ "รางน้ำ" หมายถึงช่องว่างระหว่างองค์ประกอบโดยเฉพาะ ตัวอย่างเช่นถ้าสององค์ประกอบที่อยู่ติดกันแต่ละอันมีระยะขอบ 10px ช่องว่างระหว่างองค์ประกอบทั้งสองจะกว้าง 20px ฉันเคยเห็น "รางน้ำ" ใช้บ่อยในกรอบโครงร่างแบบกริดต่างๆดังนั้นฉันจึงไม่คิดว่ามันเกินขอบเขตในบริบทของเว็บไซต์ ฉันแค่สงสัยว่านั่นเป็นคำที่ถูกต้องสำหรับช่องว่างระหว่างองค์ประกอบที่ซ้อนกันในแนวตั้งหรือไม่
JDB ยังจำโมนิก้าได้

1
@JDB: ยุติธรรมเพียงพอ ... ฉันเดาว่าการยอมรับ "รางน้ำ" เนื่องจากช่องว่างระหว่างองค์ประกอบจะขึ้นอยู่กับผู้ชมของคุณ BTW ในขอบ HTML / CSS บางครั้งจะยุบด้วยกันดังนั้นองค์ประกอบสองรายการที่มีระยะขอบ 10px ไม่จำเป็นต้องมีรางน้ำขนาด 20px พวกเขาอาจลงเอยด้วยรางน้ำขนาด 10px หากระยะขอบยุบ css-tricks.com/almanac/properties/m/margin
cockypup

นอกจากนี้ (ไม่น่ารำคาญฉันแค่กระตือรือร้นกับเรื่องนี้มาก) ใน CSS "margin" ไม่ใช่คำทั่วไป มันมีคำจำกัดความที่เฉพาะเจาะจงมาก w3.org/TR/CSS2/box.html
cockypup

1
จุดดี. ฉันตกลงจะเป็นการดีกว่าถ้ามีคำที่อ้างถึง "พื้นที่จริงที่เหลืออยู่ระหว่างองค์ประกอบ"
cockypup

1
แม้ว่าพวกเขาจะแสดงรายการทุกวิธีที่ระยะขอบจะไม่ยุบ "การยุบขอบดูเหมือนว่าจะเป็นข้อยกเว้นมากกว่ากฎในเอกสารอย่างน้อยเอกสารนั้นอ่านเช่นหนังสือไวยากรณ์ภาษาอังกฤษ: ไม่มีกฎและข้อยกเว้นทั้งหมดบางทีอย่างน้อย สำหรับทีมของคุณคุณกำหนดคำ (เช่น "ซอย") ซึ่งเป็นระยะขอบแนวตั้งระหว่างองค์ประกอบหลังจากยุบ (ไม่ใช่ -) ยุบ
Yorik

4

ในแง่เรียงพิมพ์Slugเป็นคำทั่วไปสำหรับช่องว่างแนวนอน - ช่องว่างหลัง / ก่อนย่อหน้าช่องว่างแนวนอนระหว่างส่วนหรือระหว่างกฎ ฯลฯ กระสุนมีขนาดที่ระบุคล้ายกับขนาดประเภทและจะถูกวางไว้ในแนวเดียวกันกับประเภทโลหะเพื่อสร้างระยะห่างแนวตั้งที่เหมาะสม

ตามการแก้ไข ....

Cell paddingดูเหมือนจะเป็นทางเลือกที่ชัดเจนที่สุด cell spacingหรือ


คำนี้ใช้กับการเว้นวรรคหลังส่วนด้วยหรือไม่ หรือแค่ย่อหน้า?
Zach Saucier

1
มันใช้กับพื้นที่ใด ๆ ที่ใช้พื้นที่แนวนอน ในวันชนิดร้อนกระสุนที่ใช้ในการสร้างพื้นที่มากในแนวนอนระหว่างพื้นที่ใดเป็นเรียงพิมพ์ไม่ว่าจะเป็นผู้ที่มีย่อหน้าคอลัมน์กฎ ฯลฯ ..
สกอตต์

ฉันชอบมัน แต่มันสับสนมากในการออกแบบเว็บเนื่องจากมีคำจำกัดความที่สองที่เล่น
JDB ยังจำโมนิก้าได้

1
กระสุนเป็นคำที่ใช้สำหรับระยะห่างใด ๆ ทากของโลหะที่ถูกฝังอยู่จึงไม่มีหมึกติด พวกเขาใช้ในการสร้างระยะห่างแนวนอนและประเภทการจัดตำแหน่งเช่นเดียวกับระหว่างประเภทเพื่อสร้างการเว้นวรรควรรคหรือความต้องการระยะห่างอื่น ๆ ฉันรู้ว่ามันไม่ใช่คำที่นักออกแบบหลายคนในทุกวันนี้จะต้องระวังเว้นแต่พวกเขาจะทำงานให้กับหนังสือพิมพ์บางที ไม่ได้หมายความว่ามันไม่ถูกต้อง รายการแนวตั้งคือ xheight, นำและทาก ในแง่ของการออกแบบเว็บที่เข้มงวดฉันมักจะใช้คำว่า "margin"
สกอตต์

1
... และตระหนักถึงคำถามที่ถูกแก้ไขเพื่อเพิ่มมากขึ้นหลังจากที่ฉันโพสต์คำตอบนี้ ก่อนหน้านี้ไม่มีการกล่าวถึง "เว็บ" อย่างแท้จริง
สกอตต์

1

ในการออกแบบเลย์เอาต์แนวนอนเหล่านั้นในกริดเรียกว่า "flow lines" หรือ "hang lines"


2
ยินดีต้อนรับสู่ GD.SE! โปรดอธิบายคำตอบของคุณให้ดีขึ้น คุณหมายถึงอะไรกับ "การออกแบบเลย์เอาต์"?
Mensch

หากต้องการเพิ่มสิ่งที่ Kurt พูดคุณอาจรวมตัวอย่างที่มองเห็นได้ด้วยเช่นกัน
WELZ
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.