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

งาน: ที่เพจ ฉันต้องการบล็อกสีแดง(200x200 พิกเซล) ซึ่ง ถอยห่างจากขอบของเบราว์เซอร์ด้านบนและซ้าย 40 และ 70 พิกเซลตามลำดับ และ ข้อความด้านในจะเยื้องไปทางซ้ายและด้านบน 40 พิกเซล

สารละลาย: ดูรูปและโค้ดครับ บล็อกสีแดงของเราไม่ควรเกิน 200 x 200 พิกเซล และควรเยื้องจากขอบของเบราว์เซอร์ (หรือบล็อกเนื้อหาอื่นๆ) จริงๆ แล้ว เราทำการเยื้องเหล่านี้ผ่านระยะขอบ หากเราทำการเสริม การเยื้องจะเกิดขึ้นภายในบล็อกสีแดงของเรา และการเยื้องจะเกิดขึ้นพร้อมกับพื้นหลังของบล็อกนั้นเอง (นั่นคือ สีแดง)

นอกจากคุณสมบัติที่ใช้ (บรรทัดที่ 6-9) แล้ว ยังมีคุณสมบัติ Margin-right, Padding-right, Margin-bottom, Padding-bottom ซึ่งใช้สำหรับการเยื้องทางด้านขวาและด้านล่าง ตามลำดับ ค่าสำหรับคุณสมบัติทั้งหมดเหล่านี้สามารถเป็นพิกเซล (px), เปอร์เซ็นต์ (%) หรือหน่วย em

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

คุณสมบัติของระยะขอบและช่องว่างภายใน

เมื่อใช้ช่องว่างภายใน ขนาดของช่องว่างภายในจะต้องถูกลบออกจากความสูงและความกว้างของบล็อก มิฉะนั้นขนาดของบล็อกจะเพิ่มขึ้นตามขนาดของช่องว่างภายใน

หากบล็อกได้รับค่าระยะขอบซ้ายและระยะขอบขวาเป็นอัตโนมัติ หากบล็อกมีความกว้างคงที่ (เช่น 400px) และไม่มีคุณสมบัติ CSS แบบลอย บล็อกนี้จะถูกจัดแนวให้อยู่ตรงกลาง ขององค์ประกอบที่มันตั้งอยู่ จริงๆ แล้ว สำหรับเลย์เอาต์ที่ไม่ใช่ยางซึ่งมีการจัดตำแหน่งตรงกลาง ปกติจะใช้วิธีการจัดตำแหน่งนี้ แม้ว่า IE 5.5 และรุ่นก่อนหน้าจะไม่รองรับค่าอัตโนมัติ แต่ก็ยังไม่ได้ป้องกันคุณจากการใช้งานตลอดเวลา =)

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

และสิ่งสุดท้ายที่ฉันอยากจะพูด อย่าลืมใช้โครงสร้างการเขียนชวเลข เช่น Margin: 10px 0 5px 20px; หากการเยื้องเป็นศูนย์ คุณสามารถใส่ศูนย์ได้โดยไม่ต้องระบุพารามิเตอร์ มันง่ายมากที่จะจำไว้ว่าพารามิเตอร์ใดที่เกี่ยวข้องกับขอบเขตใด - สำหรับบล็อกการเยื้องจะไปตามเข็มนาฬิกา: ตัวเลขแรกอยู่ด้านบน ตัวที่สองอยู่ทางขวา หมายเลขที่สามอยู่ด้านล่าง หมายเลขที่สี่อยู่ ซ้าย.

นั่นคือทั้งหมดที่ฉันอยากจะบอกคุณในวันนี้ สุขสันต์วันหยุดสุดสัปดาห์นะทุกคน!

สวัสดี, ผู้อ่านที่รักเว็บไซต์บล็อก วันนี้ฉันต้องการที่จะศึกษาหัวข้อต่อไปและพิจารณากฎสไตล์เหล่านั้นที่อนุญาตให้คุณตั้งค่าการเยื้องและเส้นขอบ องค์ประกอบ HTML: เส้นขอบ ระยะขอบ และช่องว่างภายใน

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

ใช่ เรายังพิจารณาหลักการใช้งานโดยละเอียดด้วย (ขยายความไปอีกหลายบทความ) ตอนนี้ได้เวลาไปยังกฎที่เป็นพื้นฐานสำหรับการสร้างเอกสาร (หน้าเว็บ) และเราจะเริ่มต้นด้วยโมเดลบล็อก (ความสัมพันธ์ขององค์ประกอบ Html)

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

โมเดลกล่องใน CSS - การเติม ระยะขอบ และเส้นขอบ

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

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

ดำเนินไปโดยไม่ได้บอกว่ามีกฎ CSS Margin สำเร็จรูป ซึ่งในหลายกรณีจะช่วยให้คุณสามารถลดขนาดของโค้ดที่ใช้ในการตั้งค่าระยะขอบภายนอกที่ต้องการได้ ลำดับของค่าในนั้นได้รับการควบคุมอย่างเข้มงวด (เขียนผ่าน อักขระอวกาศ) และควรตรงกับตัวอย่าง:

เหล่านั้น. การแจงนับเริ่มต้นจากด้านบนและดำเนินต่อไป ตามเข็มนาฬิกาจนครบวงกลมเยื้องขวา (ขวา) อาจมีลักษณะดังนี้:

ระยะขอบ:20px 10px 40px 30px;

และนี่จะหมายความว่าเบราว์เซอร์ที่อยู่เหนือบล็อกของเราควรเยื้อง 20 พิกเซลทางด้านขวา - 10 ด้านล่าง - 40 และทางด้านซ้าย - 30 นั่นคือ รายการนี้จะเทียบเท่ากับ:

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

1. หากระยะขอบทางซ้ายและขวาเท่ากัน เช่น: Margin:20px 30px 40px 30px;

   อันสุดท้ายสามารถละเว้นได้:

   ระยะขอบ:20px 30px 40px;

   รายการกฎรูปแบบสำเร็จรูปทั้งสองนี้ทำสิ่งเดียวกัน ดังนั้น หากคุณเห็นรายการที่มีค่าสามค่าใน Margin คุณจะเห็นค่าของค่าที่สี่ (ทางด้านขวา) ในส่วนที่สอง (ทางด้านซ้าย)

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

2. หากนอกเหนือจากความเท่าเทียมกันของระยะขอบภายนอกทางซ้ายและขวาแล้ว ยังมีความเท่าเทียมกันของค่าที่ด้านบนและด้านล่าง: ระยะขอบ:20px 30px 20px 30px;

   หรือซึ่งเหมือนกัน (เนื่องจากจุดที่ 1):

   ระยะขอบ:20px 30px 20px;

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

   ระยะขอบ:20px 30px;

3. ในกรณีนี้ ค่าแรกจะอธิบายระยะขอบภายนอกในแนวตั้ง และค่าที่สองจะอธิบายในแนวนอน

   และสุดท้ายหากค่าทั้งหมดในกฎรูปแบบสำเร็จรูปเหมือนกัน: ระยะขอบ:20px 20px 20px 20px;

   หรือซึ่งเหมือนกัน (เนื่องจากข้อ 2):

   ระยะขอบ:20px 20px; ที่สามารถนำมาใช้ประเภทบันทึกย่อสูงสุด (ทิ้งค่าสุดท้าย

   ตรงกับครั้งแรก):

ขอบ:20px; ซึ่งจะหมายถึงระยะขอบเท่ากันในทุกด้านขององค์ประกอบ Html ของเราเมื่อพูดถึงระยะขอบภายนอก เป็นสิ่งที่ควรค่าแก่การกล่าวถึงโครงการเช่น

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

ตัวอย่างเช่น หากตั้งค่าบล็อกบนสุดเป็น:

ระยะขอบ:20px 20px 200px 20px;

และสำหรับอันล่าง:

ระยะขอบ:100px 20px 20px 20px;

จากนั้นระยะขอบล่างของบล็อกบน (200px) จะดูดซับระยะขอบด้านบนของบล็อกล่าง (100px และแม้ว่าจะเท่ากับ 199px จะไม่มีอะไรเปลี่ยนแปลง) และระยะขอบภายนอกที่เกิดขึ้นระหว่างสองบล็อกนี้จะยังคงเท่ากับ 200px. เหล่านั้น. พิจารณาเฉพาะอันที่ใหญ่กว่าเท่านั้น modulo Margin และจะไม่บวกค่าตัวนับขององค์ประกอบที่อยู่ติดกันในแนวตั้งในทางใดทางหนึ่ง

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

ตัวอย่างเช่น ในกรณีนี้:

ขอบบน:20px 20px -20px 20px;

ขอบล่าง:10px 20px 20px 20px; อัตรากำไรขั้นต้นระหว่างบล็อกจะเป็น -10px เช่น อันล่างสุดคูณ 10px จะทับซ้อนกัน HTML ด้านบน

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

- โดยถาม:

ขอบ:20px;

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

สัมพันธ์กับองค์ประกอบอื่นๆ ที่อยู่ใกล้เคียง

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

เฟรม (เส้นขอบ) หรือความกว้างของมันจะไม่สามารถย้ายบล็อกที่อยู่ติดกันอื่น ๆ ในแนวตั้งออกจากแท็กบรรทัดได้ สำหรับองค์ประกอบแบบอินไลน์ การเคลื่อนไหวสามารถทำได้ในทิศทางเดียวเท่านั้น - ในแนวนอน เท่านี้ก็เรียบร้อย

ช่องว่างภายในและเส้นขอบ - ช่องว่างภายในและเฟรม

ตอนนี้เรามาดูการตั้งค่าช่องว่างภายในโดยใช้กฎช่องว่างภายในและดูว่าสามารถรับค่าใดได้บ้าง: อย่างที่คุณเห็นไม่มีการกล่าวถึงอัตโนมัติที่นี่และกฎ CSS นี้ไม่อนุญาตให้ใช้ค่าลบ (สามารถเป็นค่าบวกได้เท่านั้น - ตั้งแต่ศูนย์ขึ้นไป) เหล่านั้น. กับโดยใช้การแพดดิ้ง

เปอร์เซ็นต์ในนั้นคำนวณในลักษณะเดียวกับใน Margin - สัมพันธ์กับความกว้างของคอนเทนเนอร์ (พื้นที่เนื้อหาขององค์ประกอบหลัก) ซึ่งองค์ประกอบของเราล้อมรอบอยู่ กฎการเติมคอมโพสิตใน Cssถูกสร้างขึ้นและปฏิบัติตามกฎหมายเดียวกันกับที่กล่าวไว้ข้างต้น:

การขยาย:20px 10px 40px 30px;

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

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

1. Border-width — กำหนดความหนาของเส้นขอบ
2. Border-color — กำหนดสี
3. สไตล์เส้นขอบ - ประเภทของเฟรมหรือประเภทของเส้นที่จะวาด

กฎ CSS ทั้งสามข้อนี้มีชุดค่าที่ถูกต้อง:

ความกว้างของเส้นสำหรับกรอบ ( เส้นขอบกว้าง) สามารถระบุได้โดยใช้ตัวเลขใน Em, Ex หรือ Px หรือเป็นคำ:

1. เส้นบาง - เส้นบาง;
2. ปานกลาง - ปานกลาง ( มูลค่าที่กำหนดถูกใช้เป็นค่าเริ่มต้น);
3. หนา-หนา.

เส้นขอบกว้าง: 2px;

เป็นค่าสำหรับสีเฟรม ( เส้นขอบสี) คุณสามารถใช้วิธีการที่ยอมรับเพื่อระบุได้ ( รหัสฐานสิบหก, คำ ฯลฯ ):

ขอบสี:สีแดง;

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

1. ไม่มี - ไม่มีเฟรม (ค่าเริ่มต้น)
2. Dotted - เส้นถูกวาดเป็นจุด
3. ประ - เส้นประ
4. เส้นทึบ - เส้นทึบ
5. เส้นคู่ - เส้นคู่
6. Groove - กรอบหดหู่
7. สันเขา - ยื่นออกมา
8. สิ่งที่ใส่เข้าไปและเริ่มต้น - เกมเงา

โดยธรรมชาติแล้วเนื่องจากมีบล็อกสี่ด้านจึงสามารถใช้เป็นได้ กฎทั่วไปและแยกแต่ละด้าน:

เช่นเดียวกับ กฎชายแดนสำเร็จรูป— สามารถระบุได้ทั้งสองด้านพร้อมกัน (เส้นขอบ) และสำหรับแต่ละด้านแยกกัน (เส้นขอบบน ซ้าย ล่าง และขวา) ลำดับของค่าไม่สำคัญ:

เส้นขอบ: สีแดงทึบ 1px;

หากคุณพลาดสิ่งใดไป ระบบจะใช้ค่าเริ่มต้นแทน

ขอให้โชคดี! พบกันเร็ว ๆ นี้ในหน้าของเว็บไซต์บล็อก

สามารถรับชมวีดีโอเพิ่มเติมได้ที่

");">

คุณอาจจะสนใจ

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

บทความ บันทึกไอที HTML&CSS ขอให้เราจดจำตลอดไป: อะไรคือความแตกต่างระหว่างระยะขอบและช่องว่างภายใน
ขณะที่เดินไปรอบๆ ฟอรั่ม ฉันพบว่าคำถามยังคงเกิดขึ้น เกิดอะไรขึ้น ช่องว่างภายใน, และอะไร ระยะขอบและความแตกต่างระหว่างพวกเขาคืออะไร นั่นคือเหตุผลที่ฉันตัดสินใจเตือนคุณเรื่องนี้ ดังนั้น โดยไม่ต้องหันไปใช้วลีที่ลึกซึ้ง เรามาสร้างปัญหาและดูตัวอย่างซึ่งทุกอย่างจะชัดเจน
งาน: ที่เพจ ฉันต้องการบล็อกสีแดง(200x200 พิกเซล) ซึ่ง ถอยห่างจากขอบของเบราว์เซอร์ด้านบนและซ้าย 40 และ 70 พิกเซลตามลำดับ และ ข้อความด้านในจะเยื้องไปทางซ้ายและด้านบน 40 พิกเซล
สารละลาย: ดูรูปและโค้ดครับ บล็อกสีแดงของเราไม่ควรเกิน 200 x 200 พิกเซล และควรเยื้องจากขอบของเบราว์เซอร์ (หรือบล็อกเนื้อหาอื่นๆ) จริงๆ แล้ว เราทำการเยื้องเหล่านี้ผ่านระยะขอบ หากเราทำการเสริม การเยื้องจะเกิดขึ้นภายในบล็อกสีแดงของเรา และการเยื้องจะเกิดขึ้นพร้อมกับพื้นหลังของบล็อกนั้นเอง (นั่นคือ สีแดง)

200?"200px":"+(this.scrollHeight+5)+"px");">

นอกจากคุณสมบัติที่ใช้ (บรรทัดที่ 6-9) แล้ว ยังมีคุณสมบัติ Margin-right, Padding-right, Margin-bottom, Padding-bottom ซึ่งใช้สำหรับการเยื้องทางด้านขวาและด้านล่าง ตามลำดับ ค่าสำหรับคุณสมบัติทั้งหมดเหล่านี้สามารถเป็นพิกเซล (px), เปอร์เซ็นต์ (%) หรือหน่วย em
โดยหลักการแล้วก็แค่นั้นแหละ อย่างไรก็ตาม ยังมีคุณสมบัติบางอย่างในการทำงานกับพวกเขา

คุณสมบัติของระยะขอบและช่องว่างภายใน

หากบล็อกมีคุณสมบัติ CSS float คุณจะต้องกำหนด display:inline ให้กับบล็อกเพื่อไม่ให้มีระยะขอบสองเท่าทางซ้ายและขวา (สำหรับรายละเอียดเพิ่มเติม ดูบทความวิธีผูกมิตรกับ Internet Explorer 6 และ คุณสมบัติมาร์จิ้น CSS?)

เมื่อใช้ช่องว่างภายใน ขนาดของช่องว่างภายในจะต้องถูกลบออกจากความสูงและความกว้างของบล็อก มิฉะนั้นขนาดของบล็อกจะเพิ่มขึ้นตามขนาดของช่องว่างภายใน

หากบล็อกได้รับค่าระยะขอบซ้ายและระยะขอบขวาเป็นอัตโนมัติ หากบล็อกมีความกว้างคงที่ (เช่น 400px) และไม่มีคุณสมบัติ CSS แบบลอย บล็อกนี้จะถูกจัดแนวให้อยู่ตรงกลาง ขององค์ประกอบที่มันตั้งอยู่ จริงๆ แล้ว สำหรับเลย์เอาต์ที่ไม่ใช่ยางซึ่งมีการจัดตำแหน่งตรงกลาง ปกติจะใช้วิธีการจัดตำแหน่งนี้ แม้ว่า IE 5.5 และรุ่นก่อนหน้าจะไม่รองรับค่าอัตโนมัติ แต่ก็ยังไม่ได้ป้องกันคุณจากการใช้งานตลอดเวลา =)

ไม่แนะนำให้ใช้ช่องว่างภายในและระยะขอบในตาราง เนื่องจากเอฟเฟกต์จะไม่สามารถคาดเดาได้ในเบราว์เซอร์ที่แตกต่างกัน
และสิ่งสุดท้ายที่ฉันอยากจะพูด อย่าลืมใช้โครงสร้างการเขียนชวเลข เช่น Margin: 10px 0 5px 20px; หากการเยื้องเป็นศูนย์ คุณสามารถใส่ศูนย์ได้โดยไม่ต้องระบุพารามิเตอร์ มันง่ายมากที่จะจำไว้ว่าพารามิเตอร์ใดที่เกี่ยวข้องกับขอบเขตใด - สำหรับบล็อกการเยื้องจะไปตามเข็มนาฬิกา: ตัวเลขแรกอยู่ด้านบน ตัวที่สองอยู่ทางขวา หมายเลขที่สามอยู่ด้านล่าง หมายเลขที่สี่อยู่ ซ้าย.
นั่นคือทั้งหมดที่ฉันอยากจะบอกคุณในวันนี้ สุขสันต์วันหยุดสุดสัปดาห์นะทุกคน!
+

ในหัวข้อนี้คุณสามารถถามคำถามเกี่ยวกับเนื้อหาได้

คำอธิบาย

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

ข้าว. 1. เยื้องจากขอบด้านซ้ายขององค์ประกอบ

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

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

ไวยากรณ์

ระยะขอบ: [ค่า | ดอกเบี้ย | อัตโนมัติ] (1,4) | สืบทอด

ค่านิยม

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

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

อัตโนมัติ ระบุว่าจำนวนการเยื้องจะถูกคำนวณโดยอัตโนมัติโดยเบราว์เซอร์

inherit สืบทอดค่าของพาเรนต์

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

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

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

โมเดลวัตถุ

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

เบราว์เซอร์ 6 ในโหมดความเข้ากันได้ (โหมดแปลกตา) ไม่รองรับการวางศูนย์กลางบล็อกโดยใช้ระยะขอบ: 0 กฎอัตโนมัติ นอกจากนี้ยังมีข้อบกพร่องในเบราว์เซอร์นี้ด้วยการเพิ่มค่าช่องว่างภายในด้านซ้ายหรือด้านขวาเป็นสองเท่าสำหรับองค์ประกอบแบบลอยที่ซ้อนอยู่ภายในองค์ประกอบหลัก ระยะขอบที่อยู่ติดกับด้านผู้ปกครองจะเพิ่มเป็นสองเท่า โดยปกติปัญหาจะแก้ไขได้โดยการเพิ่ม display: inline ให้กับองค์ประกอบ float

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

บันทึก

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

การยุบไม่ทำงาน:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

นกฮูก Lobotomized *+* .

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

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

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

ในที่สุด.

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

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

ช่องว่างภายใน— สำหรับช่องว่างระหว่างคอนเทนเนอร์และเนื้อหา

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