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