ให้จำไว้ตลอดไป: อะไรคือความแตกต่างระหว่างระยะขอบและการเติม Padding, Margin and Border - เราตั้งค่าช่องว่างภายในและด้านนอกใน CSS เช่นเดียวกับเฟรมสำหรับทุกด้าน (บน, ล่าง, ซ้าย, ขวา) การเติมไวยากรณ์ CSS

คุณสมบัตินี้สามารถมีค่าได้หนึ่งถึงสี่ค่า

ในภาพ สีเทาอ่อนจะระบุพื้นที่ที่คุณสมบัติช่องว่างภายในรับผิดชอบ:

1. เมื่อคุณระบุ สี่ค่า(5px 10px 15px 20px ) - ลำดับการเติมจะเป็นดังนี้: สูงสุด(5px ) - ถูกต้อง(10px ) - ล่าง(15px ) - ซ้าย(20px ). หากต้องการจำลำดับการเยื้องในการประกาศครั้งเดียว คุณสามารถใช้คำภาษาอังกฤษ TRอู BLอี(ที่ไหน ตู่-สูงสุด, R-ขวา, บี- ล่าง, หลี่- ซ้าย).


2. เมื่อคุณระบุ สามความหมาย(5px 10px 15px ) - ลำดับการเติมจะเป็นดังนี้: สูงสุด(5px ) - ขวาซ้าย(10px ) - ล่าง(15px ).


3. เมื่อคุณระบุ สองค่า(5px 10px ) - ค่าแรก (5px ) จะกำหนดขนาดของช่องว่างภายในจากด้านบนและด้านล่างของเนื้อหาขององค์ประกอบ ค่าที่สอง (10px ) จะตั้งค่าช่องว่างภายในไปทางซ้ายและขวาของเนื้อหาขององค์ประกอบ


4. เมื่อคุณระบุ หนึ่งค่า(5px ) - ช่องว่างภายในทุกด้านจะมีขนาดเท่ากัน - 5px

รองรับเบราว์เซอร์

คุณสมบัติ			โอเปร่า		IExplorer	ขอบ
การขยายความ	1.0	1.0	3.5	1.0	4.0	12.0

ไวยากรณ์ CSS:

padding: "ความยาว | เริ่มต้น | สืบทอด" ;

ไวยากรณ์ JavaScript:

object.style.padding = "5px"

มูลค่าทรัพย์สิน

เวอร์ชัน CSS

CSS1

ได้รับการถ่ายทอด

เลขที่

เคลื่อนไหว

ใช่.

ตัวอย่างการใช้งาน

แหล่งที่มา: ขอบหรือช่องว่างภายใน?
ฟิลิป สปอร์เรอร์.
แปล: เวอร์ชัน 49

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

ฉันดิ้นรนเป็นเวลานานมากในการค้นหาคำตอบที่เหมาะสม และหลังจากเขียนโค้ด CSS ที่น่ากลัวและอ่านไม่ออกจำนวนมาก พร้อมด้วยผลข้างเคียงต่างๆ มากมาย ฉันสามารถพูดได้อย่างมั่นใจว่าฉันได้พบกฎพื้นฐานที่เข้มงวดเกี่ยวกับปัญหาที่ระบุไว้ข้างต้นแล้ว

มาดูสถานการณ์ทั่วไปที่นักพัฒนา UI ทุกคนน่าจะคุ้นเคยในปี 2017 กัน เรามีเทมเพลตการ์ดที่ง่ายที่สุด

ในตัวอย่างนี้ ช่วงเวลาสองประเภทสามารถแยกแยะได้:

ระหว่างไพ่ (สีน้ำเงิน);

ระหว่างไพ่กับภาชนะ (สีเขียว)

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

การนำตัวอย่างไปใช้กับ CSS?

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

คอนเทนเนอร์(
ช่องว่างภายใน: 16px
}
.card + .card(
ระยะขอบ: 0 0 0 8px;
}

เพียง 2 ตัวเลือกและ 2 กฎ

เครื่องหมายบวกทำหน้าที่อะไร

เครื่องหมาย + เป็นตัวแทน ตัวเลือกที่อยู่ติดกัน. โดยจะชี้ไปที่องค์ประกอบที่อยู่ถัดจากองค์ประกอบที่ระบุก่อนตัวเลือกนี้เท่านั้น

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

ซึ่งหมายความว่าเราสามารถเพิ่มการ์ดจำนวนเท่าใดก็ได้ที่เราต้องการ โดยระยะห่างระหว่างการ์ดจะเป็นแปดพิกเซลเสมอ

ทุกอย่างทำงานได้ดีจนเราต้องวางอย่างอื่นที่ไม่ใช่การ์ดไว้ข้างการ์ด เอาเป็นว่าปุ่ม "เพิ่มบัตร" ("เพิ่มบัตร"):

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

นกฮูก lobotomized *+* .

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

คอนเทนเนอร์(
ช่องว่างภายใน: 16px
}
/* คุณจำนกฮูกที่ถูกทำ lobotomized ได้ไหม? */
.container > * + * (
ระยะขอบ: 0 0 0 8px;
}

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

ในท้ายที่สุด.

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

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

การขยายความ- สำหรับช่องว่างระหว่างภาชนะและเนื้อหา

ระยะขอบ- สำหรับช่องว่างระหว่างองค์ประกอบภายในภาชนะ

โพสต์จำนวนการดู: 427

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

มาสร้าง div และกำหนดคุณสมบัติระยะขอบ ช่องว่างภายใน และเส้นขอบ

คุณสมบัติแพดดิ้ง

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

• ช่องว่างภายในด้านบน: 10px;
• padding-ขวา: 10px;
• padding-ด้านล่าง: 10px
• padding-ซ้าย: 10px

รายการนี้สามารถย่อให้สั้นลง:

• ช่องว่างภายใน:25px 50px 75px 100px;
  • ด้านบน 25px
  • ขวา 50px
  • ด้านล่าง 75px
  • เหลือ 100px
• ช่องว่างภายใน:25px 50px 75px;
  • ด้านบน 25px
  • ขวาและซ้าย 50px
  • ด้านล่าง 75px
• ช่องว่างภายใน:25px 50px;
  • บนและล่าง 25px
  • ขวาและซ้าย 50px
• ช่องว่างภายใน:25px;
  • ทั้งหมด 25px

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

กล่าวอีกนัยหนึ่ง เรามีองค์ประกอบ div ที่มีคลาสของ div-1:

Div.div-1( width:150px; padding: 25px;)

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

ทรัพย์สินชายแดน

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

border-width

คุณสมบัติ border-width ใช้เพื่อกำหนดความกว้างของเส้นขอบ ความกว้างถูกระบุเป็นพิกเซลหรือใช้ค่าที่กำหนดไว้ล่วงหน้าอย่างใดอย่างหนึ่ง: บาง (บาง), กลาง (กลาง) หรือหนา (หนา)

สีขอบ

คุณสมบัติ border-color ใช้เพื่อกำหนดสีของเส้นขอบ สามารถกำหนดสีได้ดังนี้

• ชื่อ - ชื่อของสี เช่น "สีแดง"
• RGB - กำหนดค่า RGB เช่น "rgb(255,0,0)"
• Hex - กำหนดค่าฐานสิบหก ตัวอย่างเช่น "#ff0000"

สไตล์เส้นขอบ

• จุด: กำหนดเส้นขอบที่แม่นยำ
• ประ: กำหนดเส้นขอบประ
• แข็ง: กำหนดเส้นขอบหนา
• สองเท่า: กำหนดสองเส้นขอบ ระยะห่างระหว่างกันขึ้นอยู่กับค่าของ border-width
• ร่อง: กำหนดเส้นขอบเยื้องสามมิติ
• สันเขา: กำหนดเส้นขอบยก 3 มิติ
• สิ่งที่ใส่เข้าไป: กำหนดเส้นขอบเพื่อให้บล็อกโยกเยกเยื้อง
• เริ่มแรก: กำหนดเส้นขอบเพื่อให้บล็อกโยกเยกนูน

คุณสามารถเขียนคุณสมบัติเส้นขอบขององค์ประกอบด้วยวิธีชวเลข:

Div.div-2( border:1px ทึบ #ccc; )

คุณสมบัติหลักประกัน

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

คุณสามารถกำหนดค่ามาร์จิ้นสำหรับองค์ประกอบเช่นนี้:

• ขอบบน:100px;
• ระยะขอบล่าง:100px;
• ระยะขอบขวา:50px;
• ระยะขอบซ้าย:50px;

รายการนี้สามารถย่อให้สั้นลง:

• ระยะขอบ:25px 50px 75px 100px;
  • ขอบบน 25px
  • ระยะขอบขวา 50px
  • ระยะขอบล่าง 75px
  • ระยะขอบซ้าย 100px
• ระยะขอบ:25px 50px 75px;
  • ขอบบน 25px
  • ระยะขอบขวาและซ้าย 50px
  • ระยะขอบล่าง 75px
• ระยะขอบ:25px 50px;
  • ระยะขอบบนและล่าง 25px
  • ระยะขอบขวาและซ้าย 50px
• ระยะขอบ:25px;
  • ทั้งสี่ระยะขอบ 25px

ด้วยการใช้ค่าระยะขอบเริ่มต้น คุณสามารถจัดกล่องให้อยู่กึ่งกลางในแนวนอนได้

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

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

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

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

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

เยื้อง:

• แผ่นรองด้านบน: ความหมาย;
• padding-ขวา: ความหมาย;
• padding-ด้านล่าง: ความหมาย;
• padding-ซ้าย: ความหมาย;

ฟิลด์:

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

สามารถระบุค่าในหน่วย 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 โปรดทราบว่าคุณสามารถใช้ค่าลบสำหรับระยะขอบได้ (เช่น -3px) ซึ่งบางครั้งก็มีประโยชน์มาก

ระยะขอบยุบ

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

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

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

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

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