CSS padding ช่วยให้ HTML coder สามารถตั้งค่าช่องว่างภายในหรือช่องว่างเริ่มต้นนอกองค์ประกอบ HTML ประโยชน์ของการทำเช่นนี้คือมันช่วยให้ coder ไม่สามารถทำซ้ำรหัสนั้น ๆ สำหรับแต่ละอินสแตนซ์ขององค์ประกอบนั้นและสร้างความมั่นคงในหน้าได้ง่ายขึ้น องค์ประกอบ HTML ที่จะเสริมอาจมีหลายสิ่งเช่นย่อหน้าตารางหรือส่วนหัว
ในการสร้างช่องว่างภายใน CSS ก่อนอื่นคุณจะต้องระบุองค์ประกอบ HTML ที่คุณต้องการแพ็ด องค์ประกอบนี้ที่คุณต้องการให้แผ่นเป็นที่รู้จักกันเป็นตัวเลือก จากนั้นคุณจะต้องระบุค่าการเติมที่เหมาะสม มีคุณสมบัติ padding ห้าประเภทที่แตกต่างกันใน CSS - ประเภทหนึ่งสำหรับทั้งสี่ด้านขององค์ประกอบในคราวเดียวและอีกสี่ประเภทสำหรับแต่ละด้านขององค์ประกอบ (เช่นด้านซ้ายด้านขวาด้านขวาด้านบนหรือด้านล่าง ) คุณสมบัติที่อนุญาตให้โปรแกรมเมอร์เพื่อระบุค่าสำหรับทั้งสี่ด้านขององค์ประกอบ HTML ในครั้งเดียวเรียกว่า คุณสมบัติชวเลข
ภาษาการเข้ารหัสที่ใช้เพื่อระบุการประกาศหนึ่งของการใส่ CSS เป็นเพียงคำว่า "การเติมเต็ม" ถัดจากป้ายกำกับนั้นคือ "ค่า" ที่เกี่ยวข้องของการแพ็ดดิงหรือข้อมูลเกี่ยวกับจำนวนของพื้นที่ที่ต้องการ ร้อยละ ช่องว่างภายในและค่าถูกเขียนภายในเครื่องหมายปีกกาหรือวงเล็บปีกกา (เช่น "{" และ "}") ก่อนหน้านี้ทั้งหมดนั้นคือองค์ประกอบ HTML ที่จะถูกเสริม (เช่น "p" สำหรับย่อหน้าหรือ "H2" สำหรับส่วนหัวระดับ 2)
ในแง่ของวิธีการแสดงค่าสามารถแสดงค่าเป็นพิกเซล (เช่น 1px หรือ 5px) คะแนน (เช่น 1pt หรือ 5pt) หรือนิ้ว (เช่น 1in หรือ 5in) หรือเซนติเมตร (เช่น 1 ซม. หรือ 5 ซม.) . ค่าสามารถถูกประกาศเป็นเปอร์เซ็นต์ขององค์ประกอบ HTML ที่กำลังจัดรูปแบบ หากค่าคือ 50% เช่นการขยายจะเท่ากับครึ่งหนึ่งของขนาดขององค์ประกอบ
ตัวอย่างต่อไปนี้เป็นรหัส HTML สำหรับการขยายองค์ประกอบ HTML ตามค่าที่แสดงเป็นเปอร์เซ็นต์และความยาวตามลำดับ หากมีการกำหนดค่าเดียวเท่านั้นเว็บเบราว์เซอร์จะกำหนดช่องว่างภายในให้กับทั้งสี่ด้านขององค์ประกอบ HTML
padding: 10%;
padding: 100px;
การเพิ่มค่ามากขึ้นให้กับประเภทของการประกาศการแพ็ดด้านบนจะทำให้เว็บเบราว์เซอร์ตีความได้อย่างที่ต้องการ หากมีการกำหนดค่าสองค่าค่าแรกจะสอดคล้องกับด้านบนและด้านล่างในขณะที่ค่าที่สองสอดคล้องกับด้านซ้ายและขวา ค่าสามค่าจะทำให้ค่าแรกอ้างอิงถึงด้านบน, ด้านที่สองจากด้านซ้ายและด้านขวา, และสามถึงด้านล่างขององค์ประกอบ HTML การกำหนดค่าสูงสุดสี่ค่าจะทำให้ค่าแรก, ที่สอง, ที่สามและที่สี่สอดคล้องกับด้านบน, ด้านขวา, ด้านล่างและด้านซ้ายขององค์ประกอบ HTML ตามลำดับนั้น เมื่อระบุมากกว่าหนึ่งค่าพวกเขาควรคั่นด้วยช่องว่างและสิ้นสุดด้วยเซมิโคลอนตัวอย่างเช่น:
การขยาย: 10px 20px 10px 20px;
Padding ใน CSS สามารถทำได้ทีละด้านเช่นกัน ในเรื่องนี้มีคุณสมบัติเสริมภายในอีกสี่ประการ เหล่านี้คือ padding-top, padding-right, Padding-bottom และ Padding-left ในการสร้างช่องว่างภายใน CSS ในลักษณะที่แม่นยำยิ่งขึ้นนี้คุณจะต้องติดป้ายคุณสมบัติด้วยไวยากรณ์เดียวกับการประกาศชวเลขและข้างต้น แต่ละคุณสมบัติการขยายเหล่านี้ใช้เพียงหนึ่งค่าในความยาวหรือเปอร์เซ็นต์เท่านั้น ตัวอย่างเช่น:
padding ด้านบน: 10px;
padding ขวา: 20px;
padding ล่าง: 10px;
padding ซ้าย: 20px;
รหัสต่อไปนี้สร้างหน้าเว็บประกาศคุณสมบัติการขยายระหว่างแท็กสไตล์จากนั้นใช้ในองค์ประกอบย่อหน้าที่ระบุโดยแท็ก p ข้อความระหว่าง / * และ * / เป็นบันทึกย่อเพื่ออธิบายชนิดของการขยายที่ใช้และจะไม่รวมอยู่ในรหัสการขยาย CSS
<html>
<head>
<style type = "text / css">
p.example1 {padding: 10px;} / * ช่องว่างภายในสั้นสำหรับทั้งสี่ด้าน * /
p.example2 {padding: 50px 30px;} / * ช่องว่างภายในสั้นด้านบนและล่างตามด้วยซ้ายและขวา * /
p.example3 {
padding ด้านบน: 10px;
padding ล่าง: 20px;
padding ล่าง: 10px;
padding ซ้าย: 20px;
} / * ช่องว่างภายในรายบุคคล * /
</ style>
</ head>
<body>
<p class = "example1"> ข้อความนี้มีช่องว่างภายในที่เหมือนกันในแต่ละด้าน ช่องว่างภายในแต่ละด้านคือ 10px </p>
<p class = "example2"> ข้อความนี้มีช่องว่างภายในด้านบนและด้านล่าง 50px และช่องว่างภายในซ้ายและขวา 30px </p>
<p class =” example3”> ข้อความนี้มีการเติมเต็มสูงสุด 10px, การเติมที่ถูกต้อง 20px, การเติมด้านล่าง 10px, และการแพ็ดด้านซ้าย 20px </p>
</ body>
</ html>
ในตัวอย่างข้างต้น“ example1,” ฯลฯ เป็นชื่อที่กำหนดให้กับคลาสซึ่งจะอ้างอิงในย่อหน้า ช่วงเวลาระหว่างแท็ก p และชื่อคลาสที่จุดเริ่มต้นของรหัสแสดงถึงการประกาศของคลาสที่กำหนดให้กับย่อหน้า สังเกตเห็นวงเล็บปีกกาหลังจากการประกาศคลาสที่ล้อมรอบการกำหนดค่าคุณสมบัติช่องว่างภายใน
แม้ว่านี่อาจดูเหมือนงานมาก แต่ก็ใช้แรงงานน้อยกว่าการระบุช่องว่างสำหรับย่อหน้าแต่ละย่อหน้า คุณสามารถประกาศคุณสมบัติ padding หนึ่งรายการสำหรับองค์ประกอบที่ต้องการซึ่งในตัวอย่างด้านบนคือแท็ก p จากนั้นอ้างอิงคลาสเมื่อคุณใช้องค์ประกอบระหว่างแท็กเนื้อความของหน้า หากจำเป็นต้องใช้การเสริมเต็มรูปแบบเพียงย่อหน้าเดียวสำหรับทุกย่อหน้าคุณไม่จำเป็นต้องใช้คลาสเลย เพียงใช้รหัสต่อไปนี้ระหว่างแท็กสไตล์แล้วโค้ดในย่อหน้าโดยไม่ระบุคลาสใด ๆ รหัสนี้จะไประหว่างแท็ก body แทนรหัสในตัวอย่างข้างต้น
p {padding: 10px 20px 10px 20px;}
CSS padding นี้จะสร้างจะมีผลกับย่อหน้าทั้งหมดแม้ว่าจะไม่มีการระบุคลาส
