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

งาน

ลบช่องว่างภายในรายการสัญลักษณ์แสดงหัวข้อย่อยหรือลำดับเลข

สารละลาย

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

ตัวอย่างที่ 1: การเยื้องรายการ

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

เชบูราชกา
ยีนจระเข้
ชาโปกเลียค

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

ข้าว. 1. รายการที่ไม่มีย่อหน้าแนวตั้งและแนวนอน

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

ตัวอย่างที่ 2: การเยื้องรายการ

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

เชบูราชกา
ยีนจระเข้
ชาโปกเลียค

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

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

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

ตั้งค่าระยะขอบบนโดยใช้ CSS

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

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

Margin-block(
ขอบบน:50px;
}

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

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

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

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

นอกจากนี้ยังมีช่องว่างภายในด้านบนใน CSS

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

ตัวอย่าง:

Padding บล็อก(
ช่องว่างด้านบน: 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)

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

เยื้องข้อความ: inherit.

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

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

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

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

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

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

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

รูปด้านล่างแสดงพารามิเตอร์การเยื้องบล็อกอย่างชัดเจน:

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

บล็อกช่องว่างภายใน

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

ช่องว่างด้านบน: 5px; /*ช่องว่างด้านบน*/ ช่องว่างด้านซ้าย: 8px; /*ช่องว่างภายในซ้าย*/ ช่องว่างด้านขวา: 8px; /*ช่องว่างด้านขวา*/ ช่องว่างด้านล่าง: 5px; /*ช่องว่างด้านล่าง*/

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

ระยะขอบ: 5px 8px 5px 8px; /*ขอบบน, ขวา, ล่าง, ซ้าย*/ ขอบ: 5px 8px 5px; /*อธิบายระยะขอบบน, ซ้าย, ขวา, ล่าง*/ ระยะขอบ: 5px 8px; /*อธิบายระยะขอบด้านบนและด้านล่าง ด้านขวาและด้านซ้าย*/ ระยะขอบ: 7px; /*อธิบายการขยายขนาด 7px ทั้งหมด*/

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

บล็อกระยะขอบ

คุณสมบัติที่รับผิดชอบต่อระยะขอบใน CSS คือ ระยะขอบ. ตัวอย่างของระยะขอบใน CSS:

ขอบบน: 5px; /*ขอบบน*/ ขอบซ้าย: 10px; /*ขอบซ้าย*/ ขอบขวา: 10px; /*ขอบขวา*/ ขอบล่าง: 5px; /*ระยะขอบล่าง*/

การขยาย: 5px 10px 5px 10px; /*ขอบบน, ขวา, ล่าง, ซ้าย*/ ระยะขอบ: 5px 10px 5px; /*อธิบายการเติมด้านบน, ซ้ายและขวา, ด้านล่าง*/ การเติม: 5px 10px; /*อธิบายช่องว่างด้านบนและด้านล่าง ด้านขวาและซ้าย*/ ช่องว่างภายใน: 7px; /*อธิบายระยะขอบ 7px ทั้งหมด*/

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

คำอธิบาย

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

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

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

รวมเขตข้อมูล

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