ระยะห่าง

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

พอดแคสต์ CSS - 013: การเว้นวรรค

สมมติว่าคุณมีคอลเล็กชัน 3 กล่อง ซ้อนทับกันและต้องการระยะห่าง คุณคิดหาวิธีทำแบบนั้นใน CSS ได้กี่วิธี

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

ระยะห่างของ HTML

HTML เองก็ใช้วิธีการบางอย่างเพื่อเว้นระยะห่างขององค์ประกอบ องค์ประกอบ <br> และ <hr> ให้คุณเว้นระยะห่างขององค์ประกอบตามทิศทางบล็อก ซึ่งหากคุณใช้ภาษาละติน จากบนลงล่าง

หากใช้องค์ประกอบ <br> ก็จะมีการขึ้นบรรทัดใหม่ เช่นเดียวกับกรณีที่คุณกดแป้น Enter ในโปรแกรมประมวลผลคำ

<hr> จะสร้างเส้นแนวนอนที่มีช่องว่างทั้ง 2 ด้าน ซึ่งเรียกว่า margin

นอกจากการใช้องค์ประกอบ HTML แล้ว เอนทิตี HTML สามารถสร้างพื้นที่ว่างได้ เอนทิตี HTML คือสตริงอักขระที่สงวนไว้ ซึ่งเบราว์เซอร์จะแทนที่ด้วยเอนทิตีอักขระ ตัวอย่างเช่น หากคุณพิมพ์ © ในไฟล์ HTML ก็จะถูกแปลงเป็นอักขระ © เอนทิตี   จะแปลงเป็นอักขระเว้นวรรคที่ไม่ขึ้นบรรทัดใหม่ ซึ่งจะเว้นวรรคแบบแทรกในบรรทัด โปรดระวัง เพราะลักษณะที่ไม่แตกตัวของตัวละครนี้ต่อองค์ประกอบ 2 อย่างเข้าด้วยกัน ซึ่งอาจทำให้เกิดลักษณะการทำงานแปลกๆ

อัตรากำไร

หากต้องการเพิ่มพื้นที่ด้านนอกขององค์ประกอบ คุณใช้พร็อพเพอร์ตี้ margin ขอบเป็นเหมือนการเพิ่มกรอบรอบองค์ประกอบ พร็อพเพอร์ตี้ margin เป็นชื่อย่อของ margin-top margin-right, margin-bottom และ margin-left

ชวเลข margin จะใช้พร็อพเพอร์ตี้ตามลำดับที่เฉพาะเจาะจงดังนี้ บน ขวา ล่าง และซ้าย คุณอาจจำปัญหาเหล่านี้ได้ด้วย: TRouBLe

คุณยังใช้ชวเลข margin กับค่า 1, 2 หรือ 3 ค่าได้ด้วย การเพิ่มค่าที่ 4 ช่วยให้คุณกำหนดแต่ละด้านได้ ซึ่งจะมีผลดังนี้

• ค่าหนึ่งจะมีผลกับทุกด้าน (margin: 20px)
• 2 ค่า: ค่าแรกจะใช้กับด้านบนและด้านล่าง และค่าที่สองจะมีผลกับด้านซ้ายและด้านขวา (margin: 20px 40px)
• 3 ค่า ได้แก่ ค่าแรกคือ top ค่าที่ 2 คือ left และ right และค่าที่สามคือ bottom (margin: 20px 40px 30px)

อัตรากำไรต้องมีความยาว เปอร์เซ็นต์หรือค่าอัตโนมัติ เช่น 1em หรือ 20% หากใช้เปอร์เซ็นต์ ค่าจะคำนวณตามความกว้างของบล็อกที่มีขององค์ประกอบ

หมายความว่าหากบล็อกขององค์ประกอบของคุณมีความกว้าง 250px และองค์ประกอบมีค่า margin เป็น 20% แต่ละด้านขององค์ประกอบจะมีระยะขอบที่คำนวณได้ 50px

คุณยังใช้ค่า auto สำหรับอัตรากำไรได้ด้วย สำหรับองค์ประกอบระดับบล็อกที่มีขนาดจำกัด ขอบ auto จะใช้พื้นที่ว่างตามทิศทางที่กำหนด ตัวอย่างที่ดีก็คือเรื่องนี้ จากโมดูล Flexbox ซึ่งรายการจะดันออกจากกัน

อีกตัวอย่างหนึ่งที่ดีของระยะขอบ auto คือ Wrapper ที่อยู่ตรงกลางแนวนอนซึ่งมีความกว้างสูงสุด Wrapper ประเภทนี้มักใช้ในการสร้างคอลัมน์กลางที่สม่ำเสมอบนเว็บไซต์

.wrapper {
    max-width: 400px;
    margin: 0 auto;
}

ตรงนี้ ระบบจะนำขอบออกจากด้านบนและด้านล่าง (บล็อก) และ auto จะใช้ช่องว่างระหว่างด้านซ้ายและด้านขวา (ในบรรทัด)

ขอบลบ

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

ยุบขอบ

การยุบมาร์จินเป็นแนวคิดที่ยุ่งยาก แต่เป็นสิ่งที่คุณจะพบกันบ่อยมากเมื่อสร้างอินเทอร์เฟซ สมมติว่าคุณมีองค์ประกอบ 2 อย่าง ได้แก่ ส่วนหัวและย่อหน้าที่ทั้ง 2 องค์ประกอบมีขอบแนวตั้ง

<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;
}

โดยสรุปแล้ว เราจะยกโทษให้เพราะคิดว่าย่อหน้าจะเว้นระยะห่าง 5em จากหัวเรื่อง เนื่องจาก 2rem และ 3rem รวมกันคำนวณเป็น 5rem แต่เนื่องจากขอบแนวตั้งยุบ ที่จริงแล้วพื้นที่จึงเป็น 3rem

การยุบขอบทำงานโดยการเลือกค่าที่มากที่สุดขององค์ประกอบที่อยู่ติดกัน 2 ส่วน โดยตั้งค่าระยะขอบแนวตั้งที่ด้านตรงข้ามกัน ด้านล่างของ h1 มาบรรจบกับด้านบนของ p ดังนั้นจึงเลือกค่าที่มากที่สุดของระยะขอบล่างของ h1 และระยะขอบบนของ p หาก h1 ต้องมีระยะขอบล่าง 3.5rem ช่องว่างระหว่างทั้งคู่จะเป็น 3.5rem เนื่องจากมีขนาดใหญ่กว่า 3rem ยุบเฉพาะระยะขอบบล็อกเท่านั้น ไม่ใช่ระยะขอบแบบอินไลน์ (แนวนอน)

การยุบขอบยังมีประโยชน์กับองค์ประกอบที่ว่างเปล่า หากคุณมีย่อหน้าที่มีขอบบนและล่างเป็น 20px โมเดลจะสร้างพื้นที่เพียง 20px เท่านั้น: ไม่ใช่ 40px แต่หากมีการเพิ่มอะไรก็ตามไว้ภายในองค์ประกอบนี้ รวมถึง padding ระยะขอบจะไม่ยุบไปเองอีกต่อไปและจะถือว่าเป็นช่องที่มีเนื้อหา

ตรวจสอบความเข้าใจ

ทดสอบความรู้เรื่องการลดลงส่วนต่างกำไร

ป้องกันการยุบขอบ

หากคุณทำให้องค์ประกอบอยู่ในตำแหน่งที่ถูกต้อง เมื่อใช้ position: absolute ขอบจะไม่ยุบอีกต่อไป นอกจากนี้ ขอบจะไม่ยุบหากคุณใช้พร็อพเพอร์ตี้ float ด้วย

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

ในบทเรียนเลย์เอาต์ คุณได้เรียนรู้ว่าคอนเทนเนอร์ Flexbox และตารางกริดคล้ายกับคอนเทนเนอร์บล็อกมาก แต่การจัดการองค์ประกอบย่อย ต่างกันมาก เช่น กรณีที่มีการยุบของขอบด้วย

หากเรานำตัวอย่างต้นฉบับจากบทเรียนและใช้ Flexbox กับทิศทางคอลัมน์ ระบบจะนำขอบทั้งหมดมารวมกัน แทนที่จะยุบ วิธีนี้จะช่วยให้คาดการณ์ งานเลย์เอาต์ได้ ซึ่งเป็นการออกแบบของคอนเทนเนอร์ Flexbox และตารางกริด

ส่วนต่างกำไรและการยุบตัวกำไร อาจเข้าใจได้ยาก แต่การทำความเข้าใจวิธีการทำงานโดยละเอียดนั้นมีประโยชน์มาก ดังนั้นคำอธิบายโดยละเอียดนี้ ขอแนะนำเป็นอย่างยิ่ง

Padding

แทนที่จะสร้างพื้นที่ด้านนอกกล่อง อย่างที่ margin ทำ พร็อพเพอร์ตี้ padding สร้างพื้นที่ภายในกล่องแทน เหมือนฉนวนกันความร้อน

ขึ้นอยู่กับว่าคุณใช้รุ่นกล่องใด ซึ่งจะมีการกล่าวถึงใน บทเรียนโมเดลกล่อง padding ก็อาจส่งผลต่อขนาดโดยรวมขององค์ประกอบได้เช่นกัน

พร็อพเพอร์ตี้ padding เป็นชื่อย่อของ padding-top, padding-right, padding-bottom และ padding-left padding มีคุณสมบัติเชิงตรรกะเช่นเดียวกับ margin ดังนี้ padding-block-start, padding-inline-end, padding-block-end และ padding-inline-start

การอธิบายหัวข้อต่างๆ แก่ลูกค้า

นอกจากนี้ยังพูดถึงในโมดูลเลย์เอาต์อีกด้วย หากตั้งค่าสำหรับ position ที่เป็นค่าอื่นที่ไม่ใช่ static คุณสามารถจัดองค์ประกอบพื้นที่ด้วยพร็อพเพอร์ตี้ top, right, bottom และ left ลักษณะการทำงานของค่าที่เป็นทิศทางเหล่านี้มีความแตกต่างกันบางประการ ดังนี้

• องค์ประกอบที่มี position: relative จะยังคงอยู่ในตำแหน่งเดิมในโฟลว์เอกสาร แม้ว่าคุณจะกำหนดค่าเหล่านี้ไว้ก็ตาม แท็กจะสัมพันธ์กับตำแหน่งขององค์ประกอบด้วย
• องค์ประกอบที่มี position: absolute จะอิงกับค่าทิศทางจากตำแหน่งของระดับบนสุดสัมพัทธ์
• องค์ประกอบที่มี position: fixed จะอิงกับค่าทิศทางบนวิวพอร์ต
• องค์ประกอบที่มี position: sticky จะใช้ค่าที่มีทิศทางเมื่ออยู่ในสถานะอยู่บน/ติดเท่านั้น

ในโมดูลคุณสมบัติเชิงตรรกะ คุณได้เรียนรู้เกี่ยวกับพร็อพเพอร์ตี้ inset-block และ inset-inline ซึ่งจะช่วยให้คุณกำหนดค่าทิศทางที่ใช้โหมดการเขียนได้

พร็อพเพอร์ตี้ทั้ง 2 รายการเป็นแบบย่อที่รวมค่า start และ end และยอมรับค่าใดค่าหนึ่งที่จะตั้งค่าให้สำหรับ start และ end หรือ 2 ค่าแยกกัน

ตารางกริดและ Flexbox

สุดท้าย ทั้งในตารางกริดและ Flexbox คุณใช้พร็อพเพอร์ตี้ gap เพื่อสร้างพื้นที่ระหว่างองค์ประกอบย่อยได้ พร็อพเพอร์ตี้ gap เป็นชื่อย่อของ row-gap และ column-gap ระบบจะยอมรับค่า 1 หรือ 2 ค่า ซึ่งอาจเป็นความยาวหรือเปอร์เซ็นต์ก็ได้ นอกจากนี้คุณยังใช้คีย์เวิร์ดอย่าง unset, initial และ inherit ได้ด้วย หากระบุเพียงค่าเดียว ระบบจะนำ gap เดียวกันไปใช้กับทั้งแถวและคอลัมน์ แต่ถ้าคุณกำหนดค่าทั้ง 2 ค่า ค่าแรกคือ row-gap และค่าที่สองคือ column-gap

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

การสร้างระยะห่างที่สม่ำเสมอ

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

ตัวอย่างเช่น คุณสามารถตกลงที่จะใช้ 20px เพื่อเป็นการวัดความสม่ำเสมอสำหรับช่องว่างทั้งหมดระหว่างองค์ประกอบต่างๆ หรือที่เรียกว่ารางน้ำ ดังนั้น ทุกเลย์เอาต์จะมีรูปลักษณ์ ให้สอดคล้องกันทั้งหมด คุณยังเลือกใช้ 1em เป็นระยะห่างในแนวตั้งระหว่างเนื้อหาโฟลว์ได้ ที่จะทำให้มีระยะห่างที่สอดคล้องตาม font-size ขององค์ประกอบ ไม่ว่าคุณจะเลือกอะไร คุณควรบันทึกค่าเหล่านี้เป็นตัวแปร (หรือคุณสมบัติที่กำหนดเองของ CSS) เพื่อแปลงค่าเหล่านั้นเป็นโทเค็นและทำให้ความสอดคล้องง่ายขึ้น

:root {
  --gutter: 20px;
  --spacing: 1em;
}

h1 {
  margin-left: var(--gutter);
  margin-top: var(--spacing);
}

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

ตรวจสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับการเว้นวรรค