Padding

<style>
  .btn-small-padding{
      padding: 6px 12px;
  }
  .btn-medium-padding {
      padding: 12px 24px
  }
  .btn-large-padding {
      padding: 16px 32px;
  }
</style>
<div class="container">
  <h3>
    เปรียบเทียบปุ่มที่มี Padding ต่างกัน
  </h3>
  <div class="button-group">
    <button class="btn-no-padding">
      ไม่มี Padding
    </button>
    <button class="btn-small-padding">
      Padding เล็ก
    </button>
    <button class="btn-medium-padding">
      Padding กลาง
    </button>
    <button class="btn-large-padding">
      Padding ใหญ่
    </button>
  </div>
  <div class="explanation">
    <p>
      สังเกตความแตกต่าง: ปุ่มที่มี
      padding จะดูใหญ่ขึ้น สวยงาม
      และคลิกง่ายกว่า
    </p>
  </div>
</div>

<style>
  .image-thin-frame {
    padding: 8px;
  }
  .image-thick-frame {
    padding: 20px;
  }
  .image-luxury-frame {
    padding: 32px;
  }
</style>

<div class="container">
  <h3>
    การใช้ Padding สร้างเอฟเฟกต์กรอบรูป
  </h3>
  <div class="image-gallery">
    <div class="image-item">
      <div class="image-no-padding">
        <div
          class="fake-image gradient-1"
        ></div>
      </div>
      <p>ไม่มี Padding</p>
    </div>
    <div class="image-item">
      <div class="image-thin-frame">
        <div
          class="fake-image gradient-2"
        ></div>
      </div>
      <p>กรอบบาง (8px)</p>
    </div>
    <div class="image-item">
      <div class="image-thick-frame">
        <div
          class="fake-image gradient-3"
        ></div>
      </div>
      <p>กรอบหนา (20px)</p>
    </div>
    <div class="image-item">
      <div class="image-luxury-frame">
        <div
          class="fake-image gradient-4"
        ></div>
      </div>
      <p>กรอบใหญ่ (32px)</p>
    </div>
  </div>
</div>