html เยื้องไปทางขวาของขอบ เรียนรู้วิธีการเยื้องข้อความใน html ระยะขอบด้านนอกด้วยคุณสมบัติ "ระยะขอบ" ของ CSS

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

ตัวเลือกการเติม CSS

ด้วย Cascading Style Sheets การเยื้องมีสองประเภท

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

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

รูปภาพเพื่อความชัดเจน:

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

ช่องว่างภายใน CSS พร้อมช่องว่างภายใน (บน, ล่าง, ซ้าย, ขวา)

คุณสมบัติสไตล์ padding-left , padding-top , padding-right และ padding-bottom ช่วยให้คุณสามารถตั้งค่า padding สำหรับด้านซ้าย ด้านบน ด้านขวา และด้านล่างขององค์ประกอบหน้าเว็บตามลำดับ:

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

ตัวอย่างเช่น สำหรับย่อหน้าปัจจุบัน ฉันใช้กฎสไตล์ที่ระบุการเยื้องด้านซ้ายเป็น 20px การเยื้องด้านบนเป็น 5px การเยื้องด้านขวาเป็น 35px และด้านล่างเป็น 10px รายการกฎจะมีลักษณะดังนี้:

p.test(
ช่องว่างภายในซ้าย: 20px;
ช่องว่างภายในด้านบน: 5px;
ช่องว่างภายในขวา:35px;
ช่องว่างภายในด้านล่าง: 10px
}

กฎการเติมสำเร็จรูปให้คุณระบุการเยื้องทุกด้านขององค์ประกอบหน้าเว็บได้ในครั้งเดียว:

การขยายความ:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

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

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

ดังนั้นจึงสามารถย่อกฎ CSS ด้านบนให้สั้นที่สุดและเขียนได้ดังนี้

p.test( ช่องว่างภายใน: 5px 35px 10px 20px)

คุณสมบัติระยะขอบหรือระยะขอบใน CSS

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

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

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

พี(
ขอบซ้าย: 20px;
}
h1(
ขอบขวา:15%;
}

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

อนุญาตให้ใช้เป็นค่าของการเยื้องภายนอกได้ ค่าลบ:

พี(
ขอบซ้าย:-20px;
}

หากมีค่าการเยื้องเป็นบวก องค์ประกอบที่อยู่ใกล้เคียงจะเคลื่อนออกไป จากนั้นมีค่าเป็นลบ บล็อกที่อยู่ใกล้เคียงจะวิ่งทับองค์ประกอบที่เราตั้งค่าการเยื้องเชิงลบไว้

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

ขอบ:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

คุณสมบัตินี้ ในกรณีของการตั้งค่าการเติมหนึ่ง สอง สาม หรือสี่ค่า ให้เป็นไปตามกฎเดียวกันกับกฎการเติม

ตัวเลือกเส้นขอบที่มีคุณสมบัติเส้นขอบ

มีตัวเลือกสามประเภทเมื่อตั้งค่าเฟรม:

ความกว้างของเส้นขอบ - ความกว้างของเส้นขอบ
สีขอบ - สีขอบ;
border-style - ประเภทของเส้นที่จะวาดเส้นขอบ

เริ่มจากพารามิเตอร์ความหนาของเส้นขอบ:

ความกว้างของเส้นขอบ: [value | บาง | ปานกลาง | หนา] (1,4) | สืบทอด

ความหนาของเฟรมสามารถตั้งค่าเป็นพิกเซลหรือหน่วยอื่น ๆ ที่มีอยู่ใน css ตัวแปร thin, medium และ thick ตั้งค่าความหนาของเส้นขอบเป็น 2, 4 และ 6 พิกเซลตามลำดับ:

ความกว้างของเส้นขอบ: ปานกลาง;

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

ความกว้างของเส้นขอบ: 5px 3px 5px 3px

สำหรับย่อหน้าปัจจุบัน เราจะสร้างความหนาของเส้นขอบด้านบนเป็น 1px, ด้านขวา 2px, ด้านล่าง 3px และด้านซ้าย 4px โดยใช้กฎ (ความกว้างของเส้นขอบ: 1px 2px 3px 4px;)

แอตทริบิวต์สไตล์ border-left-width , border-top-width , border-right-width และ border-bottom-width สามารถใช้กำหนดความหนาของด้านซ้าย ด้านบน ด้านขวา และด้านล่างของเส้นขอบ ตามลำดับ :

พารามิเตอร์ถัดไปคือสีเส้นขอบซึ่งคุณสามารถควบคุมได้ สีกรอบ:

ขอบสี: [สี | โปร่งใส](1,4) | สืบทอด

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

p(ความกว้างของเส้นขอบ: 2px; สีเส้นขอบ: สีแดง)

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

แอตทริบิวต์สไตล์ border-left-color , border-top-color , border-right-color และ border-bottom-color กำหนดสีของด้านซ้าย ด้านบน ด้านขวา และด้านล่างของเส้นขอบ ตามลำดับ:

และชุดรูปแบบเส้นขอบพารามิเตอร์สุดท้าย ประเภทเฟรม:

สไตล์เส้นขอบ: (1,4) | สืบทอด

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

แอตทริบิวต์ border-left-style , border-top-style , border-right-style และ border-bottom-style style กำหนดลักษณะของเส้นที่จะใช้วาดด้านซ้าย ด้านบน ด้านขวา และด้านล่างของกรอบ ตามลำดับ:

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

ขอบ: | สืบทอด

ค่าสามารถอยู่ในลำดับใดก็ได้โดยคั่นด้วยช่องว่าง:

td (เส้นขอบ: 1px สีเหลืองทึบ)

ในการตั้งค่าเส้นขอบเฉพาะบางด้านขององค์ประกอบ มีคุณสมบัติ border-top, border-bottom, border-left, border-right ซึ่งช่วยให้คุณตั้งค่าพารามิเตอร์สำหรับด้านบน ด้านล่าง ด้านซ้าย และด้านขวาของ ชายแดน ตามลำดับ

ยังคงเป็นเพียงการสรุป:

สำหรับงาน การขยายความใช้คุณสมบัติ การขยายความ;
สำหรับการตั้งค่า ขอบมีกฎอยู่ ขอบ;
ตัวเลือกเฟรมกำหนดโดยใช้แอตทริบิวต์ ชายแดน.

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

เพียงเท่านี้ พบกันใหม่เร็วๆ นี้!

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

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

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

ตั้งค่าการเติมด้านบนด้วย CSS

ในการสร้างการเติมด้านบนนั้นแน่นอนว่าเราไม่สามารถทำได้โดยไม่ต้องใช้คุณสมบัติ CSS เพราะเราต้องการระยะขอบบน นี่คือค่าที่สามารถตั้งค่าได้หลายวิธี ทั้งใน px และมาตรฐานบนพิกเซล, em, % และอื่น ๆ ที่ทุกอย่างเกิดขึ้นในรูปแบบ CSS ในหน่วยการวัด

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

ขอบบล็อก(
ขอบด้านบน:50px;
}

สิ่งที่เห็นในภาพ:

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

ขอบ: 20px 50px 30px 50px;

นี่คือวิธีการทำงาน ขอบ: บนขวา ล่างซ้าย :

นอกจากนี้ยังมีการเยื้องจากด้านบนใน CSS

มันเกิดขึ้นที่คุณต้องจัดองค์ประกอบเนื้อหาในแนวตั้ง ซึ่งสัมพันธ์กับบล็อกพาเรนต์ ที่นี่คุณสามารถใช้คุณสมบัติอื่นได้ เช่น padding-top ซึ่งทำหรือตั้งค่าการเยื้องขึ้นตามค่าเริ่มต้น หากเราพูดถึงคุณสมบัติที่คล้ายคลึงกัน ซึ่งสามารถเขียนและตั้งค่าในลักษณะเดียวกันได้ ระยะขอบในหน่วย px, em, % และหน่วยอื่นๆ มีดังนี้

ตัวอย่าง:

แพดดิ้งบล็อค(
ช่องว่างภายในด้านบน: 47px;
}

ลองดูตัวอย่าง:

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

ช่องว่างภายใน: 10px 20px 40px 50px;

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

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

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

ระยะขอบและช่องว่างภายใน: ความแตกต่างคืออะไร?

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

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

ทรัพย์สินส่วนต่าง

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

ขอบ: 12px

บรรทัดนี้หมายความว่าบล็อกข้อความ (หรือบล็อกอื่นๆ) จะถูกเยื้องทุกด้าน 12 พิกเซล หากต้องการเพิ่มช่วงเวลา ตัวอย่างเช่น สามครั้ง ก็เพียงพอแล้วที่จะเขียน:

ขอบ: 36px

แต่ถ้าระยะห่างระหว่างบล็อกต้องต่างกันในแต่ละด้านล่ะ? ผู้พัฒนาเว็บเพจใช้สัญลักษณ์หลายรูปแบบ:

ขอบ: 11px 22px.
ขอบ: 11px 22px 33px
ขอบ: 11px 22px 33px 44px

ในตัวอย่างแรก พิกเซล 11 พิกเซลจะถูกเยื้องจากขอบล่างและขอบบนของบล็อก และ 22 พิกเซลจะถูกเยื้องจากด้านข้างของบล็อก ตามแบบที่สองของการเขียน จะมี 11 พิกเซลระหว่างขอบบนของบล็อกกับเนื้อหา 33 พิกเซลระหว่างด้านล่าง และ 22 พิกเซลที่ด้านข้าง ในกรณีที่สาม การเติมจะอยู่ที่ 11 พิกเซลจากด้านบน 22 พิกเซลจากด้านขวา 33 พิกเซลจากด้านล่าง และ 44 พิกเซลจากด้านซ้าย

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

ขอบขวา: 22px

สำหรับด้านอื่น ๆ ระยะทางรอบ ๆ บล็อกจะเท่ากับค่าขององค์ประกอบหลัก

คุณสมบัติ ขอบมีคุณสมบัติที่นักพัฒนาควรคำนึงถึงเมื่อใช้การเยื้องแนวตั้ง CSS ช่วงเวลาขององค์ประกอบที่อยู่ใกล้เคียงจะไม่ถูกรวมเข้าด้วยกัน แต่จะซ้อนทับกัน ตัวอย่างเช่น ให้หนึ่งในบล็อกมี ระยะขอบล่าง: 15pxและบล็อกที่อยู่ติดกันจากด้านล่าง ขอบด้านบน: 35px. เลขคณิตของโรงเรียนและสามัญสำนึกกำหนดว่าการเติมทั้งหมดระหว่างพวกเขาจะเป็น 50 พิกเซล ในทางปฏิบัติไม่เป็นเช่นนั้น บล็อกด้วยมูลค่าทรัพย์สินจำนวนมาก ขอบ"ดูดซับ" เพื่อนบ้านของมัน เป็นผลให้ระยะห่างระหว่างองค์ประกอบจะเท่ากับ 35 พิกเซล

"เส้นสีแดง

เมื่อออกแบบเอกสารในโปรแกรมแก้ไขข้อความ ผู้ใช้ต้องการตั้งค่าย่อหน้าใหม่แต่ละย่อหน้าโดยใช้เส้น "สีแดง" ด้วย CSS การเยื้องข้อความทางด้านซ้ายทำได้ง่าย - ใช้โครงสร้าง เยื้องข้อความ. มันเขียนดังนี้:

เยื้องข้อความ: 11px

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

เยื้องข้อความ: 11px;

จัดข้อความ: จัดชิดขอบ

นอกจากพิกเซลแล้ว เมื่ออธิบายมาร์กอัป ยังอนุญาตให้ใช้หน่วยอื่นๆ เช่น นิ้ว จุด เปอร์เซ็นต์ ให้บล็อกมีการเยื้องข้อความ CSS 10% ด้วยความกว้างของบล็อก 500 พิกเซล เส้นสีแดงจะเป็น 50 พิกเซล (10% ของ 500)

คุณสมบัตินี้สามารถตั้งค่าเป็น สืบทอด. บันทึกดังกล่าวบอกว่าบล็อกใช้คุณสมบัติที่คล้ายกันของบล็อกหลัก

เยื้องข้อความ: สืบทอด

น่าแปลกที่มันสามารถรับค่าลบได้ด้วย! ในกรณีนี้สิ่งที่เรียกว่าหิ้งจะเกิดขึ้นนั่นคือข้อความหลักยังคงอยู่และบรรทัดแรกจะเลื่อนไปทางซ้าย 22 พิกเซล:

เยื้องข้อความ: -22px

เพื่อป้องกันไม่ให้ตัวอักษรเกินขอบด้านซ้ายของเบราว์เซอร์ นอกจากนี้ เยื้องข้อความคุณต้องใช้โครงสร้างเพื่อตั้งค่าฟิลด์:

ช่องว่างภายในซ้าย: 22px

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

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

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

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

คุณสมบัติสำหรับการเยื้องเหล่านี้เขียนด้วย css ด้วยวิธีนี้ (ย่อหน้าเป็นตัวอย่าง):

แทนที่จะใช้แท็ก P คุณเขียนองค์ประกอบของคุณ ซึ่งแน่นอนว่าจะใช้การเยื้อง

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

ค่าการเยื้อง

ค่าแรก:เยื้องจากด้านบน
ค่าที่สอง:เยื้องไปทางขวา
ค่าที่สาม:เยื้องจากด้านล่าง
ค่าที่สี่:เยื้องด้านซ้าย.

ในตัวอย่างนี้ ฉันสร้างระยะขอบใน css ด้วยวิธีนี้ ฉันเขียน 20px ด้านบน, 10px ทางซ้ายและขวา (ตามกฎแล้ว จะเหมือนกันสำหรับความสมมาตร) และ 30px ที่ด้านล่าง

และสำหรับช่องว่างภายใน ฉันระบุช่องว่างภายใน: 10px จากด้านบน ซ้ายและขวา และ 14px จากด้านล่าง

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

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

และถ้าคุณมีค่าเดียวกันสำหรับระยะขอบบนและล่าง (เช่น: 16px ) และค่าเดียวกันสำหรับระยะขอบซ้ายและขวา (เช่น: 20px ) รายการจะมีตัวย่อมากยิ่งขึ้น รูปร่าง:

ดังนั้นสำหรับการเยื้อง css รายการจะทำเหมือนกับรายการนี้

การใช้การเยื้องเดียว: สำหรับแต่ละด้านแยกกัน

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

คุณสมบัติของเบาะแต่ละด้าน

ขอบด้านบน: 3px; เยื้องบนด้านนอก;
ขอบซ้าย: 4px; เยื้องซ้ายด้านนอก
ขอบขวา: 6px; เยื้องขวาด้านนอก
ขอบล่าง: 10px; ขอบล่างด้านนอก

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

ตัวอย่างเช่น คุณมีการเยื้องทั้งหมดใน css สำหรับรูปภาพ img ทั้งหมด

นั่นคือ (เพื่อความชัดเจน) ระยะขอบมีค่าดังต่อไปนี้: ด้านบน 10px , ซ้ายและขวา: 20px แต่ละอัน และด้านล่าง 14px
และช่องว่างภายในคือ 6px ทั้ง 4 ด้าน

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

ดังนั้น รูปภาพที่คุณเพิ่มด้วยคลาส verx จะใช้การเติมทั้งหมดที่ระบุใน css สำหรับแท็ก img และเปลี่ยนเฉพาะการเติมภายนอกสำหรับด้านบน (ในกรณีของเรา: 40px )

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

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

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

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

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

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

นี่คือบล็อกข่าว ประกอบด้วยพาดหัว รายการข่าว และลิงก์ "ข่าวเพิ่มเติม" ให้ชื่อคลาสต่อไปนี้แก่พวกเขา: news_title , news__list และ news__more-link

ข่าว

ข่าวอื่น ๆ

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

ข่าว ( ช่องว่างภายใน: 20px 25px; )

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

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

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

ด้วยเหตุนี้ เราจึงตั้งค่าการเยื้องจากด้านล่างสำหรับชื่อเรื่อง และการเยื้องจากด้านบนสำหรับลิงก์ "ข่าวอื่นๆ"

News__title ( ขอบด้านล่าง: 10px; ) .news__more-link ( ขอบบน: 12px; )

เราสามารถบรรลุผลลัพธ์ภายนอกแบบเดียวกันได้โดยการเพิ่มช่องว่างด้านบนและด้านล่างของรายการข่าว

News__list ( ขอบ: 10px 0 12px 0; )

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

คุณสามารถตั้งค่าสำหรับแต่ละข่าวยกเว้นการเยื้องแรกจากด้านบน หรือสำหรับแต่ละข่าวยกเว้นการเยื้องสุดท้ายจากด้านล่าง ตัวเลือกแรกเป็นที่ต้องการเนื่องจาก :first-child pseudo-selector ถูกเพิ่มในข้อมูลจำเพาะ CSS 2.1 และมีการสนับสนุนที่กว้างกว่า :last-child pseudo-selector ซึ่งเพิ่มในข้อกำหนด CSS เวอร์ชัน 3.0 เท่านั้น

News__list-item ( margin-top: 18px; ) .news__list-item:first-child ( margin-top: 0; )

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

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

ในกรณีนี้ คุณสามารถใช้วิธีการตั้งค่าการเยื้องต่อไปนี้

Popup__header + .popup__text ( ขอบด้านบน: 15px; )

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

ยุบระยะขอบแนวตั้ง

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

นั่นคือ การเยื้องจะทับซ้อนกัน และการเยื้องระหว่างบล็อกจะเท่ากับการเยื้องที่ใหญ่ที่สุด ไม่ใช่ผลรวมของการเยื้อง เอฟเฟกต์นี้เรียกอีกอย่างว่า "ยุบ"

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

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

h1 ( ขอบล่าง: 24px; ) h2 ( ขอบบน: 24px; ขอบล่าง: 12px; ) p ( ขอบบน: 12px; )

ตอนนี้สามารถวางหัวเรื่อง h2 ได้ทั้งหลังหัวเรื่อง h1 และหลังย่อหน้า ไม่ว่าในกรณีใด การเติมด้านบนจะไม่เกิน 24px

กฎทั่วไป

โดยสรุป ฉันต้องการแสดงรายการกฎที่ฉันปฏิบัติตามเมื่อจัดเรียงระยะขอบและการเยื้อง

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