ค่าช่องว่างภายในแบบสัมพันธ์ วิธีตั้งค่าระยะขอบและช่องว่างภายใน CSS (และเคล็ดลับการจัดวางที่ยอดเยี่ยม) สิ่งที่ต้องจำ

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

โมเดลบล็อก

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

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

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

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

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

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

ตัวอย่างเช่น ลองใช้บล็อกที่มีความกว้าง 200px และความสูง 200px โดยมีระยะห่างจากขอบ 10px ทุกด้าน และมีเส้นขอบ 2px ทุกด้าน เบราว์เซอร์ไม่เห็นบล็อก 200px เบราว์เซอร์คำนวณพื้นที่แนวนอนที่จำเป็นในการแสดงบล็อก และมันคือ 224px: 200(กว้าง)+2(ขอบซ้าย)+10(ขยายด้านซ้าย)+10(ขยายด้านขวา)+2(เส้นขอบขวา)=224px เนื่องจากนี่คือสี่เหลี่ยมจัตุรัส ความสูงจึงเท่ากับ 224px

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

ตามค่าเริ่มต้น เบราว์เซอร์ทั้งหมดจะใช้โมเดลบล็อก W3C โมเดลสามารถตั้งค่าได้ด้วยตนเองโดยใช้คุณสมบัติ box-sizing ยอมรับสองค่า: content-box (W3C) และ border-box (รุ่นดั้งเดิม) โมเดลแบบดั้งเดิมนั้นใช้งานง่ายกว่า ซึ่งทำให้ได้รับความนิยมสูงสุดในหมู่นักพัฒนาเว็บ

ด้านล่างนี้คือวิธีใช้การกำหนดขนาดกล่องเพื่อใช้โมเดลดั้งเดิมในโครงการของคุณ:

html ( box-sizing: border-box; ) *, *:before, *:after ( box-sizing: inherit; )

เอชทีเอ็มแอล (

กล่อง - ขนาด : ขอบ - กล่อง ;

* , * : ก่อน , * : หลัง (

ขนาดกล่อง : inherit ;

หากคุณจำสิ่งต่าง ๆ ได้เร็วขึ้นเมื่อคุณทำสิ่งต่าง ๆ ด้วยตัวเอง ลองทดลองด้วยการสาธิตแบบโต้ตอบแสนสนุกจาก Guy Routledge

การตั้งค่าระยะขอบและช่องว่างภายใน

คุณสามารถใช้คุณสมบัติ Padding-top, Padding-right, Padding-bottom และ Padding-left เพื่อควบคุม Padding ทั้งสี่ด้านขององค์ประกอบ ช่องว่างภายในสามารถระบุได้โดยใช้คุณสมบัติชวเลข หากมีการเขียนค่าช่องว่างภายในเพียงค่าเดียว CSS จะใช้ค่าดังกล่าวเพื่อกำหนดช่องว่างภายในทั้ง 4 ด้าน:

/* ทั้ง 4 ด้าน */ ขยาย: 10px;

หากนำเสนอ 3 ค่า ค่าแรกจะรับผิดชอบด้านบน ค่าที่สองสำหรับซ้ายและขวา และค่าที่สามสำหรับด้านล่าง:

/* ด้านบน | แนวนอน | ด้านล่าง */ ช่องว่างภายใน: 1em 20px 2em;

หากนำเสนอทั้ง 4 ค่า แต่ละค่าจะรับผิดชอบบน ขวา ล่าง และซ้าย ตามลำดับ:

/* ด้านบน | ขวา | ด้านล่าง | ซ้าย */ ช่องว่างภายใน: 10px 10% 2em 15%;

ในการสาธิตด้านล่าง พื้นหลังสีส้มคือพื้นที่เนื้อหาสำหรับองค์ประกอบต่างๆ พื้นที่สีขาวระหว่างเฟรมและเนื้อหาเป็นพื้นที่เสริม:

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

/* ทั้ง 4 ด้าน */ ระยะขอบ: 10px; /* แนวตั้ง | แนวนอน */ ระยะขอบ: 2em 4em; /* ด้านบน | แนวนอน | ด้านล่าง */ ระยะขอบ: 2em อัตโนมัติ 2em; /* ด้านบน | ขวา | ด้านล่าง | ซ้าย */ ระยะขอบ: 10px 10% 2em 15%;

สิ่งที่ต้องจำ

ใช้หน่วยวัดที่ถูกต้อง

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

สมมติว่าคุณตั้งค่าความกว้างขององค์ประกอบเป็น 50% และระยะขอบเป็น 15px ที่ความกว้าง 1200px ความกว้างขององค์ประกอบจะเป็น 600px และระยะขอบจะเป็น 15px ที่ความกว้าง 769px ความกว้างขององค์ประกอบจะเป็น 384px และระยะขอบจะยังคงเป็น 15px

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

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

วิธีที่เบราว์เซอร์คำนวณระยะขอบและระยะห่างจากขอบสำหรับหน่วยการวัดต่างๆ

เบราว์เซอร์คำนวณระยะขอบสุดท้ายและค่าการเติมที่แตกต่างกันขึ้นอยู่กับหน่วยการวัด

ระยะขอบและระยะห่างจากขอบที่ระบุเป็นเปอร์เซ็นต์จะถูกคำนวณโดยสัมพันธ์กับความกว้างของคอนเทนเนอร์ นั่นคือ ช่องว่างภายใน 5% จะเท่ากับ 5px หากความกว้างของคอนเทนเนอร์คือ 100px หรือ 50px หากความกว้างของคอนเทนเนอร์คือ 1000px อย่าลืมว่าค่าบนและล่างจะคำนวณตามความกว้างของคอนเทนเนอร์ด้วย

ในกรณีของ em ระยะขอบและช่องว่างภายในจะขึ้นอยู่กับขนาดตัวอักษรขององค์ประกอบ ในการสาธิตครั้งก่อน ช่องว่างภายในขององค์ประกอบข้อความสามรายการด้านล่างคือ 1em เนื่องจากขนาดแบบอักษรที่แตกต่างกัน ค่าช่องว่างภายในที่คำนวณได้จะแตกต่างกันเสมอ

นอกจากนี้ยังมีหน่วยวัดวิวพอร์ต 4 หน่วย vw, vh, vmin และ vmax ในกรณีนี้ ค่าระยะขอบและช่องว่างภายในจะขึ้นอยู่กับวิวพอร์ต ตัวอย่างเช่น การเติม 5vw จะเท่ากับ 25px โดยมีความกว้างวิวพอร์ต 500px และการเติม 10vw จะเท่ากับ 50px บนวิวพอร์ตเดียวกัน คุณสามารถศึกษาหน่วยการวัดเหล่านี้โดยละเอียดได้ในบทความบนเว็บไซต์ SitePoint “CSS Viewport of Units of Measure: Quick Start”

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

การล่มสลายของระยะขอบ

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

สมมติว่าคุณมีองค์ประกอบสองรายการที่อยู่ต่ำกว่าอีกองค์ประกอบหนึ่ง กล่าวคือ ในระดับเดียวกัน หากคุณตั้งค่าขอบด้านล่างเป็น 40px ในองค์ประกอบแรก และขอบด้านบนเป็น 25px ในองค์ประกอบที่สอง อัตรากำไรรวมระหว่างองค์ประกอบจะไม่เท่ากับ 65px การเยื้องจะเท่ากับค่าของระยะขอบที่ใหญ่กว่านั่นคือ 40px.

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

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

ในกรณีของระยะขอบติดลบ ค่าสุดท้ายของระยะขอบที่ยุบจะเท่ากับผลรวมของระยะขอบบวกกับค่าลบที่น้อยที่สุด คุณสามารถศึกษาหัวข้อการยุบขอบได้โดยละเอียดในบทความ “การยุบขอบ” โดย Adam Roberts

วิธีที่น่าสนใจในการใช้ระยะขอบและช่องว่างภายใน

บางครั้งระยะขอบและระยะห่างจากขอบสามารถช่วยแก้ไขปัญหาเค้าโครงได้ ด้านล่างนี้เป็นตัวอย่างบางส่วน:

รักษาสัดส่วนภาพในภาพ

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

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

ตัวอย่างเช่น อัตราส่วนกว้างยาว 16:9 ทำได้โดยการเสริม: 56.25% 0 0 0 ค่า 56.25 ได้จาก (9/16)*100 เมื่อใช้วิธีการนี้ คุณจะคำนวณเปอร์เซ็นต์การขยายสำหรับอัตราส่วนภาพอื่นๆ ได้

บทสรุป

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

คำอธิบาย

ตั้งค่าระยะขอบรอบเนื้อหาขององค์ประกอบ ระยะขอบคือระยะห่างจากขอบด้านในของกรอบขององค์ประกอบถึงสี่เหลี่ยมจินตภาพที่ขอบเขตเนื้อหา (รูปที่ 1)

คุณสมบัติ Padding ช่วยให้คุณสามารถตั้งค่า Padding สำหรับทุกด้านขององค์ประกอบพร้อมกันหรือกำหนดเฉพาะด้านที่ระบุเท่านั้น

ไวยากรณ์

การขยาย: [ค่า | เปอร์เซ็นต์] (1, 4) | สืบทอด

ค่านิยม

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

ขนาดของฟิลด์สามารถระบุเป็นพิกเซล (px) เปอร์เซ็นต์ (%) หรือหน่วยอื่นๆ ที่ยอมรับได้สำหรับ CSS ค่าที่สืบทอดบ่งชี้ว่าค่านั้นสืบทอดมาจากพาเรนต์ เมื่อระบุระยะขอบเป็นเปอร์เซ็นต์ ค่าจะคำนวณจากความกว้างของพาเรนต์ขององค์ประกอบ

HTML5 CSS2.1 IE Cr Op Sa Fx

ช่องว่างภายใน

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. คุณเพียงแค่ต้องทำเช่นนี้และทำขั้นตอนสุดท้ายให้เสร็จสิ้น

ผลลัพธ์ ตัวอย่างนี้แสดงในรูปที่. 2.

ข้าว. 2. การใช้คุณสมบัติการเติม

โมเดลวัตถุ

document.getElementById("elementID ").style.padding

เบราว์เซอร์

Internet Explorer เวอร์ชันสูงสุดและรวมถึง 7.0 ไม่รองรับค่าที่สืบทอด

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

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

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 จะลดลงเหลือหนึ่งหลังจากนั้นจึงเปรียบเทียบและเลือกค่าที่มากขึ้น
ขนาดระยะขอบสำหรับองค์ประกอบลูกถูกกำหนดด้วยวิธีที่น่าสนใจยิ่งขึ้นไปอีก: หากลูกมีระยะขอบมากกว่าระดับบนสุด ระบบจะให้ความสำคัญกับขนาดดังกล่าว ในกรณีนี้ ขนาดของระยะขอบบนและล่างของพาเรนต์จะเหมือนกับขนาดที่ระบุไว้สำหรับเด็ก ในกรณีนี้จะไม่มีระยะห่างระหว่างผู้ปกครองและเด็ก

คำอธิบาย

ไวยากรณ์

การขยาย: [ค่า | เปอร์เซ็นต์] (1, 4) | สืบทอด

ค่านิยม

HTML5 CSS2.1 IE Cr Op Sa Fx

ช่องว่างภายใน

ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 2.

ข้าว. 2. การใช้คุณสมบัติการเติม

โมเดลวัตถุ

document.getElementById("elementID ").style.padding

เบราว์เซอร์

Internet Explorer เวอร์ชันสูงสุดและรวมถึง 7.0 ไม่รองรับค่าที่สืบทอด

ฉันจะบอกคุณทันที - นี่เป็นบทเรียนที่สำคัญมาก หลังจากศึกษาแล้ว คุณจะสามารถวางองค์ประกอบบนหน้า ตั้งค่าการเยื้องระหว่างองค์ประกอบเหล่านั้น สร้างองค์ประกอบเหล่านั้นภายในบล็อกเฉพาะที่แยกจากกัน และกำหนดระยะขอบ

ช่องว่างภายใน

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

หน่วยการวัดอาจเป็นพิกเซล (px) หรือเปอร์เซ็นต์ (%)

#ปิดกั้น (
ช่องว่างภายใน: 12px; /* การเยื้องจากขอบบล็อกถึงเนื้อหา - 12 พิกเซลทุกด้าน */
}

คุณสามารถระบุฟิลด์เฉพาะด้านเดียวเท่านั้น:

ช่องว่างด้านบน- คุณสมบัติที่สร้างฟิลด์ที่ด้านบน
ช่องว่างภายในด้านขวา- คุณสมบัติที่สร้างฟิลด์ทางด้านขวา
ช่องว่างภายในด้านล่าง- คุณสมบัติที่สร้างฟิลด์ที่ด้านล่าง
ช่องว่างภายในด้านซ้าย- คุณสมบัติที่สร้างฟิลด์ทางด้านซ้าย

#ปิดกั้น (
ช่องว่างภายในด้านล่าง: 25px; /* ขอบล่าง 25 พิกเซล */
ช่องว่างภายในซ้าย: 15px; /* ขอบซ้าย 15 พิกเซล */
}

อย่างที่คุณสังเกตเห็น หากคุณระบุฟิลด์เป็น 2 หรือ 3 ด้านด้วยวิธีนี้ คุณจะได้รับโค้ดที่ยาว มีชวเลขสำหรับคุณสมบัติการขยายเพื่อจุดประสงค์นี้ ระบุทั้ง 4 ค่าตามลำดับ - จากแต่ละขอบในบรรทัดเดียวการเคลื่อนไหวจะไปตามเข็มนาฬิกาโดยเริ่มจากด้านบน:

การขยาย: การขยายด้านบน การขยายด้านขวา การขยายด้านล่าง การขยายด้านซ้าย;

#ปิดกั้น (
การขยาย: 25px 10px 15px 6px; /* บน 25px, ขวา 10px, ล่าง 15px, ซ้าย 6px */
}

ระยะขอบ

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

#ปิดกั้น (
ระยะขอบ: 4px;
}

หากต้องการระบุการเยื้องเฉพาะบางด้าน มีคุณสมบัติดังต่อไปนี้:

ขอบด้านบน- คุณสมบัติที่สร้างการเยื้องที่ด้านบน
ขอบขวา- คุณสมบัติที่สร้างการเยื้องทางด้านขวา
ขอบล่าง- คุณสมบัติที่สร้างการเยื้องที่ด้านล่าง
ขอบซ้าย- คุณสมบัติที่สร้างการเยื้องซ้าย

เช่นเดียวกับคุณสมบัติการเติม ขอบยังมีความสามารถในการย่อค่าสำหรับด้านต่างๆ การเคลื่อนไหวจะหมุนตามเข็มนาฬิกาจากช่องด้านบน:

Margin: TopMargin RightMargin Margin ขอบล่างซ้าย;

#ปิดกั้น (
ระยะขอบ: 15px 10px 5px 25px; /* บน 15px, ขวา 10px, 5px ล่าง, ซ้าย 25px */
}

ขอบคุณสำหรับความสนใจของคุณ!