ฉันจะสร้างช่องว่างภายในใน CSS ได้อย่างไร

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

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

ภาษาการเข้ารหัสที่ใช้ในการระบุการประกาศหนึ่งครั้งของ CSS padding เป็นเพียงคำว่า "การขยาย"ตามป้ายกำกับนั้นเป็นค่าที่เกี่ยวข้องของช่องว่างภายในหรือข้อมูลเกี่ยวกับปริมาณพื้นที่ที่ต้องการมักจะแสดงโดยพิกเซลหรือเปอร์เซ็นต์ช่องว่างภายในและค่าถูกเขียนภายในวงเล็บปีกกาหยิกหรือวงเล็บหยิก (เช่น {และ})ก่อนหน้านี้ทั้งหมดคือองค์ประกอบ HTML ที่จะเบาะ (เช่น p สำหรับวรรคหรือ H2 สำหรับส่วนหัวระดับ 2)

ในแง่ของวิธีการแสดงค่าค่าสามารถแสดงค่าเป็นพิกเซล (เช่น 1px หรือ 5px), คะแนน (เช่น 1pt หรือ 5pt) หรือนิ้ว (เช่น 1in หรือ 5in) หรือเซนติเมตร (เช่น 1 ซม. หรือ 5 ซม.)นอกจากนี้ยังสามารถประกาศค่าเป็นเปอร์เซ็นต์ขององค์ประกอบ HTML ที่มีสไตล์หากค่าคือ 50%ตัวอย่างเช่นการขยายจะเท่ากับครึ่งขนาดขององค์ประกอบ

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

การขยาย: 10%;

การขยาย: 100px;

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

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

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

padding-top: 10px;

padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;

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

lt; html gt;

lt; head gt;
lt; ประเภทสไตล์ ' ข้อความ/css gt;
p.example1 {padding: 10px;} /* ช่องว่างภายในระยะสั้นสำหรับทั้งสี่ด้าน* /
p.example2 {padding: 50px 30px;} /* ช่องว่างระยะสั้นสำหรับด้านบนและด้านล่างตามด้วยซ้ายและขวา * /
p.example3 {
padding-top: 10px;
padding-bottom: 20px;
padding-bottom: 10px;
padding-left: 20px;
} / * padding ของแต่ละบุคคล*/
lt;/style gt;
lt;/head gt;

lt; body gt;
lt; p class ' ตัวอย่าง 1 gt; ข้อความนี้มีช่องว่างเดียวกันในแต่ละด้านช่องว่างภายในแต่ละด้านคือ 10px. lt;/p gt;
lt; p class ' ตัวอย่าง 2 gt; ข้อความนี้มีช่องว่างด้านบนและด้านล่าง 50px และช่องด้านซ้ายและขวาของ 30px lt;/p gt;
lt; p class;'” ตัวอย่าง 3” gt; ข้อความนี้มีช่องว่างภายใน 10px, ช่องว่างด้านขวาของ 20px, ช่องว่างด้านล่างของ 10px, และช่องว่างด้านซ้ายของ 20px. lt;/p gt;
lt;/body gt;
lt;/html gt;;

ในตัวอย่างข้างต้น“ ตัวอย่าง 1” เป็นต้นเป็นชื่อที่กำหนดให้กับคลาสซึ่งจะอ้างอิงในวรรคระยะเวลาระหว่างแท็ก P และชื่อคลาสที่จุดเริ่มต้นของรหัสหมายถึงการประกาศของคลาสที่กำหนดให้กับย่อหน้าสังเกตเห็นการจัดฟันหลังจากประกาศคลาสที่ล้อมรอบการกำหนดค่าคุณสมบัติการขยาย

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

p {padding: 10px 20px 10px 20px;}

การเติม CSS นี้จะสร้างขึ้นจะส่งผลกระทบต่อย่อหน้าทั้งหมดแม้ว่าจะไม่มีการระบุชั้นเรียนก็ตาม