ภาพรวมของ CSS Padding โดยย่อ

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

CSS Padding Property

หากต้องการใช้ชวเลข CSS CSS padding คุณสามารถใช้ "TRouBLe" (หรือ "TRiBbLe" สำหรับแฟน Star Trek) นี่หมายถึง ด้านบน ขวา ล่าง และ ซ้าย และหมายถึงลำดับของความกว้าง padding ที่คุณตั้งไว้ในคุณสมบัติชวเลข ตัวอย่างเช่น:

padding: ด้านบนขวาล่างซ้าย; padding: 1px 2px 3px 6px;

หากคุณใช้ค่าที่ระบุไว้ด้านบนระบบจะใช้ค่าส่วนขยายที่ต่างไปจากด้านใด ๆ ขององค์ประกอบ HTML ที่คุณนำมาใช้ ถ้าคุณต้องการใช้ padding เดียวกันกับทั้งสี่ด้านคุณสามารถลดความซับซ้อนของ CSS และเพียงแค่เขียนค่าเดียว:

padding: 12px;

ด้วยเส้น CSS นั้นเส้นผ่านศูนย์กลาง 12 พิกเซลจะใช้กับทั้ง 4 ด้านขององค์ประกอบ

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

padding: 24px 48px;

ค่าแรก (24px) จะใช้กับด้านบนและด้านล่างส่วนที่สองจะใช้กับด้านซ้ายและด้านขวา

ถ้าคุณเขียนสามค่าที่จะทำให้ padding แนวนอน (ซ้ายและขวา) เดียวกันในขณะที่การเปลี่ยนแปลงด้านบนและด้านล่าง:

padding: ด้านบนขวาและซ้ายล่าง; padding: 0px 1px 3px;

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

CSS Padding Values

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

#container {width: 800px; ความสูง: 200px; } #container p (ความกว้าง: 400px; ความสูง: 75%; padding: 25% 0; }

ความสูงของย่อหน้าภายในองค์ประกอบ #container จะเท่ากับ 75% ของความสูงของ #container และ 25% ของความกว้างสำหรับส่วนด้านบนและ 25% ของความกว้างสำหรับส่วนล่าง จำนวนรวม 300 + 200 + 200 = 700px

ผลกระทบของการเพิ่ม CSS padding

ใน องค์ประกอบระดับบล็อก การใส่ padding จะใช้กับด้านทั้งสี่ด้าน เนื่องจากองค์ประกอบเป็นบล็อกหรือกล่องแล้ว padding จะใช้กับด้านข้างกล่อง

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

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