โพสต์นี้อธิบาย:
- ควรใช้ “padding” กับ “margin” ใน CSS เมื่อใด
- จะใช้ 'margin' ใน CSS ได้อย่างไร?
- จะใช้ “padding” ใน CSS ได้อย่างไร?
ควรใช้ “padding” กับ “margin” ใน CSS เมื่อใด
ซีเอสเอส “ ขอบ ' และ ' การขยายความ คุณสมบัติ ” ใช้ในการออกแบบส่วนต่อประสาน นอกจากนี้ยังใช้สำหรับระบุช่องว่างพิเศษหรือช่องว่างระหว่างองค์ประกอบ อย่างไรก็ตามคุณสมบัติทั้งสองนี้แตกต่างกันในแง่ของการทำงาน
ที่นี่ เราจะอธิบายความแตกต่างบางประการระหว่างคุณสมบัติทั้งสอง:
| ขอบ | การขยายความ |
|---|---|
| ขอบให้พื้นที่ภายนอกองค์ประกอบ | การเติมทำให้มีช่องว่างภายในเนื้อหาขององค์ประกอบ |
| เราสามารถกำหนดระยะขอบองค์ประกอบเป็น “ อัตโนมัติ ” เพื่อตั้งค่าระยะขอบรอบองค์ประกอบโดยอัตโนมัติ | ไม่สามารถตั้งค่าการเติมเป็นอัตโนมัติได้ ผู้ใช้ต้องระบุค่าเพื่อตั้งค่าช่องว่างภายในองค์ประกอบ |
| ระยะขอบไม่ส่งผลต่อสไตล์ขององค์ประกอบ | เมื่อเราใช้สีพื้นหลังกับองค์ประกอบ มันจะส่งผลต่อสไตล์ขององค์ประกอบ |
| เราสามารถตั้งค่าบวกและค่าลบเป็นมาร์จิ้นได้ | การเติมรองรับเฉพาะค่าบวกเท่านั้น |
จะใช้ 'margin' ใน CSS ได้อย่างไร?
เพื่อใช้ประโยชน์จาก “ ขอบ ” คุณสมบัติ ก่อนอื่นให้สร้าง “ ผลลัพธ์ของรหัสที่ระบุข้างต้นระบุไว้ด้านล่าง: ตอนนี้สร้างอีก ' เอาต์พุต ตอนนี้ใช้คุณสมบัติ 'margin' ในคลาส '.margin-div': ในรหัสข้างต้น ' .margin-div ” ใช้สำหรับเข้าถึงองค์ประกอบ div เพื่อใช้คุณสมบัติด้านล่าง: ที่นี่ คุณจะเห็นว่าเราได้ตั้งค่า ' ขอบ ” คุณสมบัติที่สอง “ แผนก ' ธาตุ: ในการใช้คุณสมบัติ 'ช่องว่างภายใน' มีการใช้ตัวอย่างที่ระบุไว้ข้างต้น ในครั้งที่สอง “ แผนก ” คอนเทนเนอร์ ใช้คลาส “ ช่องว่างภายใน-div ” เพื่อใช้ช่องว่างภายใน: เอาต์พุต เมื่อต้องการใช้ช่องว่างภายในและคุณสมบัติ CSS อื่นๆ บน “ .padding-div ” ชั้นเรียน ดูรหัสที่ให้ไว้: ในรหัสที่กล่าวถึงข้างต้น เราเข้าถึงส่วนที่สอง “ แผนก ” องค์ประกอบที่ใช้คลาส “ .padding-div '. เราได้ตั้งค่า 'สีพื้นหลัง' และ 'ขนาดตัวอักษร' นอกจากนี้ “ การขยายความ คุณสมบัติ ” ใช้เพื่อเพิ่มช่องว่างรอบเนื้อหาองค์ประกอบจากแต่ละด้านเป็น “ 50พิกเซล '. เอาต์พุต เราได้อธิบายความแตกต่างและการใช้ 'padding' และ 'margin' ใน CSS ซีเอสเอส “ ขอบ ” ใช้เพื่อกำหนดระยะห่างรอบองค์ประกอบ ในขณะที่ “ การขยายความ ” ใช้เพื่อเพิ่มระยะห่างรอบเนื้อหาองค์ประกอบ หากต้องการใช้คุณสมบัติระยะขอบหรือการเติม ขั้นแรกให้สร้าง ' แผนก ” คอนเทนเนอร์ และระบุคลาส หลังจากนั้น เข้าชั้นเรียนโดยใช้ชื่อชั้นเรียนและใช้ปุ่ม “ ขอบ ' และ ' การขยายความ ' คุณสมบัติ. โพสต์นี้ได้อธิบายการใช้ margin vs padding ใน CSS
< แผนก ระดับ = 'ลินุกซ์' >
< หน้า > Linuxhint เป็นหนึ่งในเว็บไซต์การสอนที่ดีที่สุด < / หน้า >
< / แผนก >
< แผนก ระดับ = 'margin-div' สไตล์ = 'เส้นขอบ: 1px สีดำทึบ' >
< หน้า >Linuxhint เป็นหนึ่งในเว็บไซต์การสอนที่ดีที่สุด< br >
< / หน้า >
< แผนก >
พื้นหลัง- สี : RGB ( 199 , 238 , 205 ) ;
ตัวอักษร- ขนาด : ปานกลาง;
ชายแดน : 3px RGB ( 114 , 250 , 114 ) ;
ขอบ: 100px 100px 100px 100px;
}
จะใช้ “padding” ใน CSS ได้อย่างไร?
< หน้า > Linuxhint เป็นหนึ่งในเว็บไซต์สอนที่ดีที่สุด < / หน้า >
< / แผนก >
< แผนก ระดับ = 'ช่องว่างภายใน-div' สไตล์ = 'เส้นขอบ: 1px สีดำทึบ' >
< หน้า >Linuxhint เป็นหนึ่งในเว็บไซต์การสอนที่ดีที่สุด< br >
< / หน้า >
< / แผนก >
พื้นหลัง- สี : RGB ( 199 , 238 , 205 ) ;
ตัวอักษร- ขนาด : ปานกลาง;
ช่องว่างภายใน: 50px 50px 50px 50px;
}
บทสรุป