การเยื้อง padding สำหรับด้านต่างๆ ใน CSS

สำหรับการเยื้องภายใน ก็เหมือนกับการเยื้องภายนอก ที่มีคุณสมบัติสำหรับแต่ละด้านแยกกัน: padding-left, padding-right, padding-top และ padding-bottom มาดูการทำงานของพวกมันกัน:

html<div id="elem">
  some long text
</div>
css#elem {
  padding-top:    10px; /* ด้านบน */
  padding-right:  20px; /* ด้านขวา */
  padding-bottom: 30px; /* ด้านล่าง */
  padding-left:   40px; /* ด้านซ้าย */
  
  width: 300px;
  border: 1px solid red;
  text-align: justify;
}

Результат:

Задание 1

สร้างหน้าเว็บตามตัวอย่างนี้: