พอดแคสต์ 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
ระยะขอบจะไม่ยุบไปในตัวเองอีกต่อไปและจะถือว่าเป็นช่องที่มีเนื้อหา
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้ของคุณเกี่ยวกับการยุบส่วนต่าง
หากองค์ประกอบ 2 รายการซ้อนอยู่ด้านบนกันทั้ง 2 องค์ประกอบมีระยะขอบบน 20 พิกเซลและระยะขอบล่าง 30 พิกเซล จะมีพื้นที่ระหว่างองค์ประกอบทั้งสองเท่าใด
การป้องกันการยุบขอบ
หากจัดตำแหน่งองค์ประกอบให้พอดีโดยใช้ 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 และระบบจะแสดงค่าที่อัปเดตด้วย
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้เกี่ยวกับการเว้นระยะห่าง
คุณสามารถใช้ HTML เพื่อเว้นระยะห่างเมื่อ...
หากต้องการสร้างพื้นที่ว่างภายในกล่อง ให้ใช้...
หากต้องการสร้างพื้นที่ทำงานนอกช่อง ให้ใช้...
หากต้องการสร้างพื้นที่ว่างระหว่างช่อง ให้ใช้...