ส่วนใหญ่แล้ว ในการระบุขนาดของการเยื้องในหน้า HTML จะใช้ความสามารถของภาษา CSS (Cascading Style Sheets) แม้ว่าในภาษา HTML เองจะมีเศษ "พื้นฐาน" อยู่หลายส่วน ทำให้ในบางกรณีสามารถตั้งค่าการเยื้องได้ ด้านล่างนี้คือตัวเลือกที่ใช้บ่อยที่สุด แต่นอกเหนือจากนั้น ยังมีลูกเล่นหลายประเภทที่ให้คุณตั้งค่าการเยื้องสำหรับมาร์กอัปที่ไม่ได้มาตรฐานของเอกสาร HTML
มันจำเป็น
ความรู้พื้นฐานของภาษา HTML และ CSS CSS
คำแนะนำ
ขั้นตอนที่ 1
กำหนดองค์ประกอบของหน้าที่จะเยื้อง ตัวอย่างเช่น หากข้อความอยู่ในแท็ก … (บล็อก) บล็อกนี้จะเป็นองค์ประกอบหลักสำหรับข้อความนี้ และควรนับการเยื้องจากขอบของบล็อก และหากข้อความ (หรือรูปภาพ) ไม่ได้อยู่ภายในองค์ประกอบใดๆ ของบล็อก (div, li ฯลฯ) หรืออินไลน์ (span, p เป็นต้น) เนื้อหาหลักจะเป็นเนื้อหาของเอกสาร (แท็ก body) การกำหนดองค์ประกอบหลักสำหรับข้อความเป็นสิ่งที่จำเป็น เนื่องจากเป็นผู้ที่ต้องกำหนดคำอธิบายของสไตล์ที่ก่อให้เกิดการเยื้อง สมมติว่าข้อความของคุณอยู่ในบล็อก div: ข้อความตัวอย่าง
ขั้นตอนที่ 2
ใช้คุณสมบัติระยะขอบภาษา CSS เพื่อกำหนดระยะขอบ กล่าวคือ ระยะห่างจากเส้นขอบขององค์ประกอบไปยังองค์ประกอบที่อยู่ติดกัน เช่นเดียวกับเส้นขอบขององค์ประกอบหลัก ระยะนี้สามารถกำหนดแยกกันสำหรับช่องว่างภายในแต่ละด้าน: ระยะขอบด้านบน - ด้านบน ระยะขอบด้านขวา - ด้านขวา ระยะขอบด้านล่าง - ด้านล่าง ระยะขอบด้านซ้าย - ด้านซ้าย สำหรับตัวอย่างข้างต้น โค้ด css นี้อาจมีลักษณะดังนี้: div {
ขอบบน: 10px;
ระยะขอบขวา: 15px;
ระยะขอบล่าง: 40px;
ระยะขอบซ้าย: 70px;
} ที่นี่ "div" คือตัวเลือกที่ระบุว่าควรใช้สไตล์นี้กับ div ทั้งหมดในโค้ดเอกสาร ไวยากรณ์ CSS ช่วยให้คุณรวมทั้งสี่บรรทัดเป็นหนึ่งเดียว: div {
ระยะขอบ: 10px 15px 40px 70px;
} ค่าของการเยื้องจะต้องระบุในลำดับนี้เสมอ: อันดับแรก - ที่ด้านบนแล้ว - ทางด้านขวาล่างและซ้าย หากการเยื้องเหมือนกันทุกด้านก็เพียงพอที่จะระบุค่า ครั้งเดียว: div {
ระยะขอบ: 70px;
} นอกจากนี้ คุณสามารถตั้งค่าระยะขอบแนวนอนแบบลอยตัวได้ (นั่นคือ ซ้ายและขวา) สิ่งนี้มีประโยชน์มากเมื่อคุณต้องตั้งค่าบล็อกของความกว้างที่กำหนดตรงกลางหน้าต่างเบราว์เซอร์ เบราว์เซอร์จะกำหนดจำนวนการเยื้องทั้งสองด้านโดยอัตโนมัติ หากคุณเขียนคำสั่ง CSS ต่อไปนี้: div {
ระยะขอบ: 0 อัตโนมัติ;
}
ขั้นตอนที่ 3
ใช้คุณสมบัติ padding เพื่อตั้งค่า padding ซึ่งเป็นระยะทางจากเส้นขอบขององค์ประกอบไปยังองค์ประกอบใดๆ ที่อยู่ภายในนั้น รวมถึงข้อความ ไวยากรณ์สำหรับคุณสมบัตินี้เหมือนกับคุณสมบัติระยะขอบทุกประการ: div {
ช่องว่างภายใน: 10px;
padding-ขวา: 15px;
padding-ด้านล่าง: 40px;
ช่องว่างภายในด้านซ้าย: 70px;
} หรือ div {
ช่องว่างภายใน: 10px 15px 40px 70px;
}
ขั้นตอนที่ 4
ใช้คุณสมบัติการเยื้องข้อความเพื่อตั้งค่าการเยื้องเพิ่มเติมสำหรับบรรทัดแรกของแต่ละย่อหน้าของข้อความ ตัวอย่างเช่น: div {
ข้อความเยื้อง: 80px;
}
ขั้นตอนที่ 5
ใช้แอตทริบิวต์ hspace และ vspace ของแท็ก HTML img เพื่อตั้งค่าการเยื้องแนวนอนและแนวตั้งจากรูปภาพเป็นองค์ประกอบภายนอกตามลำดับ ตัวอย่างเช่นเช่นนี้:
ขั้นตอนที่ 6
ใช้แอตทริบิวต์ cellpadding ของแท็กตาราง หากคุณต้องการตั้งค่าการเยื้องจากเส้นขอบของเซลล์ในตารางเป็นเนื้อหา และแอตทริบิวต์การเว้นวรรคเซลล์จะกำหนดระยะห่างระหว่างเซลล์ตาราง ตัวอย่างเช่น:
| 1 | 2 |