วิธีใช้คุณสมบัติ CSS Padding

เรียนรู้วิธีใช้ CSS padding ทรัพย์สิน

CSS padding คุณสมบัติใช้เพื่อควบคุมปริมาณพื้นที่ ภายใน องค์ประกอบ HTML ระหว่างเนื้อหาและเส้นขอบ

padding มักจะสับสนกับ CSS margin คุณสมบัติซึ่งเพิ่มช่องว่าง ภายนอก เส้นขอบขององค์ประกอบ (ตรงข้ามกับสิ่งที่ padding ได้)

พื้นฐานการเติม CSS

นี่คือองค์ประกอบปุ่มที่มีป้ายกำกับข้อความ (เนื้อหา):

<button>Button</button>

ให้ปุ่มมีค่าช่องว่างภายใน 24px:

button { 
    padding: 24px;
}

ผลลัพธ์:

หากคุณเปลี่ยนค่าช่องว่างภายในเป็น 0 คุณได้รับสิ่งนี้:

มีคุณสมบัติช่องว่างภายในห้าแบบใน CSS:

• padding-top
• padding-right
• padding-bottom
• padding-left
• padding (อันที่เราเพิ่งใช้)

คุณสมบัติการเติมสี่รายการแรก (-บน, -ขวา, -ล่าง, -ซ้าย) เป็นคุณสมบัติเฉพาะทิศทางเดียวที่สามารถเพิ่มช่องว่างภายในได้เพียงด้านเดียวเท่านั้น

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

มาสำรวจ padding . กัน ทรัพย์สินอีกเล็กน้อย

วิธีใช้ชวเลข Padding

ชวเลข padding คุณสมบัติ (อันเดียวที่เราใช้จนถึงตอนนี้) สามารถเพิ่มค่าช่องว่างภายในได้หลายค่าพร้อมกัน (ค่าหนึ่ง สอง สาม หรือสี่ค่า)

มาดูตัวอย่างกัน

ชวเลขการเติมค่าหนึ่งค่า

ในตัวอย่างปุ่ม padding 24px ก่อนหน้านี้ คุณสามารถทำได้ใน CSS:

button {
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
    padding-left: 24px;
}

แต่นั่นเสียเวลาเปล่าเมื่อคุณกำหนดเป้าหมายทั้งสี่ด้านพร้อมกันโดยใช้ค่าเดียว ชวเลขช่องว่างภายใน:

button { 
    padding: 24px;
}

ชวเลขช่องว่างภายในสองค่า

จะทำอย่างไรถ้าคุณต้องการเพิ่มช่องว่างภายในขนาด 16px ที่ด้านบนและด้านล่าง แต่ช่องว่างภายในขนาด 24px ที่ด้านซ้ายและด้านขวาล่ะ

คุณสามารถทำได้ (วิธีที่ใช้เวลานาน):

button {
    padding-top: 16px; 
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px; 
}

หรือใช้เพื่อนที่ดีของคุณทั้งสองค่า padding อักษรย่อ:

button {
    padding: 16px 24px;
}

เมื่อคุณใช้ padding คุณสมบัติที่มี สอง ค่าเหมือนด้านบน:

• ค่าแรกกำหนดเป้าหมายทั้งช่องว่างด้านบนและด้านล่าง
• ค่าที่สองกำหนดเป้าหมายทั้งช่องว่างด้านซ้ายและด้านขวา

ผลลัพธ์:

ชวเลขการเติมสามค่า

เมื่อคุณใช้ padding ทรัพย์สินที่มี สาม ค่า เช่น:

button {
    padding: 12px 24px 8px;
}

• ค่าแรกคือการเติมด้านบน
• ค่าที่สองคือ ทั้งคู่ ด้านซ้ายและขวา
• ค่าที่สามคือการเติมด้านล่าง

ผลลัพธ์:

ชวเลขการเติมสี่ค่า

เมื่อคุณใช้ padding คุณสมบัติที่มี สี่ ค่า เช่น:

button {
    padding: 12px 16px 12px 16px;
}

• ค่าแรกคือการเติมด้านบน
• ค่าที่สองคือการเติมด้านขวา
• ค่าที่สามคือการเติมด้านล่าง
• ค่าที่สี่คือช่องว่างภายในด้านซ้าย

ควรใช้คุณสมบัติการเติมแบบทิศทางเดียวเมื่อใด

ชวเลข padding คุณสมบัติเตะคุณสมบัติการเติมแบบทิศทางเดียวในแง่ของความยืดหยุ่นและประสิทธิภาพ

เหตุใดคุณจึงใช้ตัวอย่าง:

padding-left: 24px;

หากคุณสามารถใช้ชวเลขด้านล่างเพื่อให้ได้ผลลัพธ์แบบเดียวกัน

padding: 0 0 0 24px; /* top: 0, right: 0, bottom: 0, left: 24px */

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

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

padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 24px

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

padding: 0 0 0 24px; /* top, right, bottom, left */

ค่าปริยาย/ค่าปัจจุบันที่ฉันกำลังพูดถึงคืออะไร

ฉันหมายถึงสไตล์ที่สืบทอดมาจาก:

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

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

ตัวอย่างเช่น หากช่องว่างภายในปัจจุบันบนองค์ประกอบปุ่มของคุณมีลักษณะดังนี้ (ไม่ว่าจะมาจากไหน):

button {
    padding-top: 16px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 16px
}

และคุณสร้างคลาสปุ่มที่เน้นเฉพาะค่าสูงสุดของช่องว่างภายใน:

.button-login {
    padding-top: 40px;
}

และเพิ่มไปยังองค์ประกอบปุ่ม:

<button class="button-login">Login</Button>

จากนั้นปุ่มเข้าสู่ระบบของคุณจะมีลักษณะดังนี้:

เพราะอีกครั้ง ค่าช่องว่างภายในด้านขวา ด้านล่าง และด้านซ้ายจะสืบทอดมาจากที่อื่น

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

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

สิ่งนี้ทำให้เวิร์กโฟลว์ของฉันสามารถคาดเดาได้มากขึ้นเพราะฉันไม่ต้องกังวลเกี่ยวกับสไตล์ต่างๆ ที่ส่งต่อโดย User Agent Stylesheet ของเบราว์เซอร์ X

ด้วยเหตุผลทั้งหมดที่กล่าวมาข้างต้น การใช้เครื่องหมายย่อ padding วิธีการกำหนดค่าการเติม — ส่วนใหญ่

หากมีข้อสงสัย ให้ใช้ชวเลขช่องว่างภายใน

วิธีการจำ padding shorthands

การจดชวเลขค่าสี่ค่านั้นจำง่ายที่สุดเพราะมีการเติมค่า ตามเข็มนาฬิกา: บน ขวา ล่าง ซ้าย

ชวเลขค่าสองและสามมีความชัดเจนน้อยกว่า:

• ชวเลขสองค่า:16px 8px (บน-ล่าง ซ้าย-ขวา)
• ชวเลขสามค่า:8px 16px 4px (บน ซ้าย ขวา ล่าง)

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

หน่วยความยาวช่องว่างที่ยอมรับได้

padding คุณสมบัติยอมรับหน่วยความยาวทุกประเภท หน่วยความยาวที่พบบ่อยที่สุดคือ px , rem , em , % , vw , vh , inherit .

หมายเหตุ: ฉันใช้หน่วยพิกเซล px ในบทช่วยสอนนี้เนื่องจากเป็นประเภทหน่วยที่สัมพันธ์กันมากขึ้นสำหรับผู้เริ่มต้น (ซึ่งผมคิดว่าพวกคุณส่วนใหญ่เป็นเช่นนั้น) โดยเฉพาะอย่างยิ่งหากคุณมาจากพื้นหลังการออกแบบภาพโดยใช้ Illustrator, Sketch, Figma เป็นต้น

อย่างไรก็ตาม พิกเซลเป็นหน่วยสัมบูรณ์ ที่มีความยาวตายตัวจึงปรับขนาดได้ไม่ดี

หน่วยสัมพัทธ์ เช่น rem . ที่กล่าวมา , em , % , vw , vh เก่งในการปรับขนาด แต่แต่ละคนก็ใช้วิธีการที่แตกต่างกัน

ฉัน ส่วนใหญ่ใช้ rem สำหรับค่าการเติมของฉัน แต่ส่วนใหญ่เป็นเรื่องของการตั้งค่าในยุคนี้ซึ่งเบราว์เซอร์สมัยใหม่ทั้งหมดสามารถประมวลผลหน่วยทุกประเภทได้

การเพิ่มประสิทธิภาพ (การอ่านตัวเลือก)

สำหรับผู้ที่มาจากพื้นฐานการเพิ่มประสิทธิภาพ ฉันรู้ว่าคุณคิดอย่างไร:

“มีความแตกต่างด้านประสิทธิภาพ/ค่าใช้จ่ายในการใช้ชวเลขช่องว่างภายใน เมื่อเทียบกับการใช้ค่าทิศทางเดียวหรือไม่"

คำตอบคือ ใช่ อย่างไรก็ตาม เป็นไปไม่ได้เลยที่จะคาดเดาว่าตัวอย่างใดในสองตัวอย่างต่อไปนี้มีประสิทธิภาพสูงสุด:

padding: 8px 12px 16px 20px;

padding-top: 8px;
padding-right: 12px;
padding-bottom: 16px;
padding-left: 20px;

คุณอาจคิดว่าชวเลขเป็นตัวเลือกที่มีประสิทธิภาพมากที่สุด เนื่องจากมีไบต์ (ข้อมูล) น้อยกว่าในการประมวลผล

อย่างไรก็ตาม ทุกอย่างขึ้นอยู่กับสิ่งที่เกิดขึ้นระหว่างการพัฒนาและการผลิตในแง่ของการประมวลผลโค้ด (การแยกวิเคราะห์ ย่อขนาด คอมไพล์) และการกำหนดค่าและจัดระเบียบโครงการของคุณ

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