การเว้นพื้นที่

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

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

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

ระยะห่าง HTML

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

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

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

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

อัตรากำไร

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

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

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

• ค่าหนึ่งจะมีผลกับทุกด้าน (margin: 20px).
• มี 2 ค่า ค่าแรกจะใช้กับด้านบนและด้านล่าง และค่า 2 จะมีผลกับด้านซ้ายและด้านขวา (margin: 20px 40px)
• มี 3 ค่า โดยค่าแรกคือ top ค่าที่ 2 คือ left และ right และค่าที่ 3 คือ 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 และคอนเทนเนอร์ตารางกริด

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

ระยะห่างจากขอบ

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

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

พร็อพเพอร์ตี้ padding เป็นชื่อย่อของ padding-top, padding-right, padding-bottom และ padding-left เช่นเดียวกับ margin padding มีคุณสมบัติเชิงตรรกะด้วยเช่นกัน 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 และค่าที่ 2 จะเป็น 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 และระบบจะแสดงค่าที่อัปเดตด้วย

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

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