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

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

Padding แยกเนื้อหาออกจากเส้นขอบของบล็อก และระยะขอบจะสร้างช่องว่างระหว่างบล็อก

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

คุณสมบัติต่อไปนี้มีอยู่เพื่อตั้งค่าระยะขอบหรือช่องว่างภายในใน CSS ในแต่ละด้านขององค์ประกอบ:

การขยายความ:

• ช่องว่างภายในด้านบน: ความหมาย;
• ช่องว่างภายในขวา: ความหมาย;
• ช่องว่างภายในด้านล่าง: ความหมาย;
• ช่องว่างภายในซ้าย: ความหมาย;

สาขา:

• ขอบด้านบน: ความหมาย;
• ขอบขวา: ความหมาย;
• ขอบล่าง: ความหมาย;
• ขอบซ้าย: ความหมาย;

สามารถระบุค่าในหน่วย CSS ใดก็ได้ - px, em, % ฯลฯ ตัวอย่าง: margin-top: 15px .

นอกจากนี้ยังมีสิ่งที่สะดวกมากเช่น ชวเลขสำหรับระยะขอบและการขยาย CSS. หากคุณต้องการตั้งค่าระยะขอบหรือช่องว่างภายในทั้งสี่ด้านขององค์ประกอบ คุณไม่จำเป็นต้องเขียนคุณสมบัติสำหรับแต่ละด้านแยกกัน ทุกอย่างง่ายขึ้น: สำหรับระยะขอบและช่องว่างภายในคุณสามารถระบุค่า 1, 2, 3 หรือ 4 ค่าในคราวเดียว จำนวนค่ากำหนดวิธีการกระจายการตั้งค่า:

• ค่า 4 ค่า: ระยะห่างจากขอบถูกตั้งค่าสำหรับทุกด้านขององค์ประกอบตามลำดับต่อไปนี้: บน, ขวา, ล่าง, ซ้าย: ระยะห่างจากขอบ: 2px 4px 5px 10px;
• 3 ค่า: ช่องว่างภายในถูกตั้งค่าไว้เป็นอันดับแรกสำหรับด้านบน จากนั้นพร้อมกันสำหรับด้านซ้ายและด้านขวา จากนั้นสำหรับด้านล่าง: ช่องว่างภายใน: 3px 6px 9px;
• 2 ค่า: ช่องว่างภายในถูกตั้งค่าพร้อมกันจากด้านบนและด้านล่าง จากนั้นพร้อมกันสำหรับซ้ายและขวา: ช่องว่างภายใน: 6px 12px;
• 1 ค่า: มีการตั้งค่าช่องว่างภายในเท่ากันสำหรับทุกด้านขององค์ประกอบ: ช่องว่างภายใน: 3px;

กฎเดียวกันนี้ใช้กับคุณสมบัติ CSS Margin โปรดทราบว่าคุณสามารถใช้ค่าลบสำหรับมาร์จิ้นได้ (เช่น -3px) ซึ่งบางครั้งอาจมีประโยชน์มาก

ยุบระยะขอบ

ลองนึกภาพสถานการณ์: องค์ประกอบบล็อกสององค์ประกอบวางซ้อนกันและจะได้รับฟิลด์มาร์จิ้น บล็อกด้านบนถูกกำหนดไว้ที่ Margin: 60px และบล็อกด้านล่างถูกกำหนดไว้ที่ Margin: 30px มันสมเหตุสมผลที่จะสมมติว่าฟิลด์ที่มีเส้นขอบทั้งสองขององค์ประกอบทั้งสองจะสัมผัสกันและด้วยเหตุนี้ช่องว่างระหว่างบล็อกจะเท่ากับ 90 พิกเซล

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

ระยะห่างระหว่างบล็อกเท่ากับค่าที่มากกว่า

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

• เมื่อค่ามาร์จิ้นทั้งสองเป็นบวก ขนาดมาร์จิ้นที่ได้จะเท่ากับค่าที่มากขึ้น
• หากค่าใดค่าหนึ่งเป็นลบคุณต้องคำนวณขนาดของฟิลด์เพื่อให้ได้ผลรวมของค่า ตัวอย่างเช่น ด้วยค่า 20px และ -18px ขนาดฟิลด์จะเป็น:
  20 + (-18) = 20 – 18 = 2 พิกเซล
• หากทั้งสองค่าเป็นลบ จะมีการเปรียบเทียบโมดูลัสของตัวเลขเหล่านี้ และเลือกตัวเลขที่มีโมดูลัสมากกว่า (ด้วยเหตุนี้ ตัวเลขลบที่น้อยกว่า) จะถูกเลือก ตัวอย่าง: คุณต้องเปรียบเทียบค่าของฟิลด์ -6px และ -8px โมดูลัสของตัวเลขที่จะเปรียบเทียบคือ 6 และ 8 ตามลำดับ ตามมาด้วย 6 -8 ขนาดฟิลด์ผลลัพธ์คือ -8 พิกเซล
• ในกรณีที่มีการระบุค่าไว้ใน หน่วยที่แตกต่างกัน CSS จะลดลงเหลือหนึ่งหลังจากนั้นจึงเปรียบเทียบและเลือกค่าที่มากขึ้น
• ขนาดระยะขอบสำหรับองค์ประกอบลูกถูกกำหนดด้วยวิธีที่น่าสนใจยิ่งขึ้นไปอีก: หากลูกมีระยะขอบมากกว่าระดับบนสุด ก็จะให้ความสำคัญกับขนาดนั้น ในกรณีนี้ ขนาดของระยะขอบบนและล่างของพาเรนต์จะเหมือนกับขนาดที่ระบุไว้สำหรับเด็ก ในกรณีนี้จะไม่มีระยะห่างระหว่างผู้ปกครองและเด็ก

ขอบและช่องว่างภายในเป็นรูปแบบที่สำคัญมากในการสร้างหน้า HTML ช่วยให้คุณวางตำแหน่งองค์ประกอบได้แม่นยำยิ่งขึ้น สร้างเฟรมที่มีช่องว่างที่จำเป็น ฯลฯ ทั้งสองสไตล์มีความคล้ายคลึงกันมากและทำหน้าที่คล้ายกัน แต่ก็ยังมีความแตกต่างอยู่

องค์ประกอบสามารถซ้อนกันหรืออยู่ติดกัน ลองดูตัวอย่างต่อไปนี้:

เรามีโต๊ะสองโต๊ะ สีเลมอนและสีฟ้า โดยโต๊ะหนึ่งอยู่ด้านล่างของอีกโต๊ะ ตารางประกอบด้วยเซลล์เดียว มีบล็อกสีแดงอยู่ในเซลล์ตารางแรก จากตัวอย่างนี้ เรามาดูกันว่าระยะขอบและการเยื้องทำงานอย่างไร

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

มีหลายวิธีในการตั้งค่าสไตล์เหล่านี้ ตัวอย่างเช่น ระบุขนาดของระยะขอบหรือการเยื้องทั้งหมดโดยตรงด้วยอาร์กิวเมนต์เดียวในหน่วยการวัดบางหน่วย (px, ex, em, pt, cm และอื่นๆ):

ช่องว่างภายใน: 3px; ระยะขอบ: 3px;

ในกรณีนี้ระยะขอบและการเยื้องจะเหมือนกันทั้งสี่ด้าน เมื่อระบุสองอาร์กิวเมนต์คั่นด้วยช่องว่าง:

การขยาย: 3px 5px; ระยะขอบ: 3px 5px;

อันแรกจะกำหนดจำนวนระยะขอบ/การเยื้องที่ด้านบนและด้านล่าง ส่วนอันที่สอง - ทางซ้ายและขวา เมื่อให้เหตุผล ๓ ประการ คือ

การขยาย: 3px 5px 2px; ระยะขอบ: 3px 5px 2px;

อันแรกคือระยะขอบ/การเยื้องที่ด้านบน อันที่สองคือทั้งซ้ายและขวา อันที่สามอยู่ที่ด้านล่าง ด้วยข้อโต้แย้งสี่ประการ:

การขยาย: 3px 5px 2px 6px; ระยะขอบ : 3px 5px 2px 6px ;

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

ในรูป บล็อกสีแดงอยู่ภายในเซลล์ตารางและอยู่ติดกับเส้นขอบ กล่าวคือ เซลล์ไม่มีระยะขอบ มาตั้งค่าระยะขอบของเซลล์โดยใช้สไตล์:

ช่องว่างภายใน: 5px;

ด้วยเหตุนี้ เพจจะเปลี่ยนเป็นดังนี้:

ตอนนี้เรามาดูการเยื้องกัน ตารางสองตารางอยู่ติดกัน หากเราต้องการแยกออกจากกันเล็กน้อย เราสามารถใช้การเยื้องได้ มีสองตัวเลือกที่นี่: ตั้งค่าการเยื้องด้านล่างของตารางแรก หรือการเยื้องด้านบนของตารางที่สอง ลองใช้อันที่สอง:

ขอบบน: 5px;

โปรดทราบว่าเราตั้งค่าการเยื้องให้กับตารางโดยเฉพาะ ไม่ใช่กับเซลล์ของตาราง เช่นเดียวกับกรณีของฟิลด์ นี่คือผลลัพธ์:

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

รหัส HTML ของหน้าทดสอบ:

<html > <หัว > <หัวเรื่อง >ทดสอบ</หัวเรื่อง> <meta http-equiv = "ประเภทเนื้อหา" content = "text/html;charset=utf-8"> </หัว> <ร่างกาย > <สไตล์ >ตาราง (กว้าง: 200px; ความสูง: 150px; เส้นขอบ: 1px ทึบ #555; ยุบขอบ: ยุบ) td (จัดแนวตั้ง: ด้านบน; ขยาย: 0px) div (กว้าง: 100px; ความสูง: 100px; พื้นหลัง: สีแดง)</สไตล์> <รูปแบบตาราง = "พื้นหลัง: มะนาว" > <ตร > <td style = "ช่องว่างภายใน: 5px" > <สไตล์ div = "ระยะขอบ: 0px" ></div> </td> </tr> </ตาราง> <รูปแบบโต๊ะ = "พื้นหลัง: ฟ้า; ขอบบน: 5px"> <ตร > <ทีดี ></td> </tr> </ตาราง> </ตัว> </html> Padding-ด้านบน

ฉันหวังว่าคุณจะคุ้นเคยกับโครงสร้างของบล็อกแล้ว ถ้าไม่เช่นนั้นจะแสดงด้านล่าง

โครงสร้างบล็อก

ดังนั้น. คุณคงทราบแล้วว่าระยะขอบและระยะขอบของบล็อกแสดงด้วยคุณสมบัติการเติมและระยะขอบตามลำดับ และในบทความก่อนหน้านี้เราได้กล่าวถึงหัวข้อนี้แล้วบางส่วน ในหน้านี้ เราจะมาดูฟิลด์ต่างๆ อย่างละเอียดยิ่งขึ้น ( การขยายความ) และช่องว่างภายใน ( ระยะขอบ ).

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

ดังนั้น. ระยะขอบจะถูกระบุโดยคุณสมบัติการเติม นี่คือระยะทางภายในจากขอบเขตของบล็อกถึงเนื้อหา

คุณสมบัตินี้ใช้กับองค์ประกอบทั้งหมด

ระยะทางระบุไว้ในหน่วยความยาว CSS, % หรือ ( ค่าเริ่มต้น

คุณสมบัติการเติมนั้นเป็นสากลเพราะมันตั้งค่าระยะขอบจากเส้นขอบขององค์ประกอบเป็นเนื้อหาสำหรับทุกด้าน ดังนั้นการรวมคุณสมบัติ padding-top , padding-right , padding-bottom และ padding-left ซึ่งกำหนดความกว้างของ ระยะขอบสำหรับองค์ประกอบแต่ละด้านแยกกัน

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

คุณสมบัติมาร์จิ้นยังใช้กับองค์ประกอบทั้งหมดด้วย

ช่องว่างภายในยังระบุในหน่วยความยาว CSS, % หรือ ( ค่าเริ่มต้น) ถูกตรวจพบโดยอัตโนมัติโดยเบราว์เซอร์

คุณสมบัติ Margin นั้นเป็นสากล เนื่องจากมันกำหนดจำนวนการเยื้องจากเส้นขอบขององค์ประกอบสำหรับทุกด้าน ดังนั้นการรวมคุณสมบัติ Margin-top , Margin-right , Margin-bottom และ Margin-left ซึ่งกำหนดความกว้างของการเยื้อง จากเส้นขอบของแต่ละองค์ประกอบแยกกัน

และอีกอย่างหนึ่ง: การเยื้อง ( ระยะขอบ) ตั้งอยู่นอกบล็อก ในขณะที่ระยะขอบ ( การขยายความ) ข้างใน ดังนั้นพื้นหลังของบล็อกหรือมัน ภาพพื้นหลังใช้เฉพาะกับระยะขอบและการเยื้องจะโปร่งใสเสมอหรือมีพื้นหลังของระยะหลัก ( ผู้ปกครอง) บล็อกหรือพื้นหลังหน้า

ข้อมูลโค้ด: