การทำงานกับ padding ใน CSS

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

ตอนนี้เรามาดูตัวอย่างการทำงานของ คุณสมบัตินี้กัน เริ่มจากบล็อกที่ไม่มีระยะห่าง (ข้อความติดกับ เส้นขอบ):

html<div id="elem">
  some long text
</div>

css#elem {
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}

Результат:

และตอนนี้ตั้งค่า padding เป็น 30px สำหรับทุกด้าน:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 30px;
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}

Результат: