CSS: เพิ่มกล่องด้วยกรอบ border: 1px solid #ccc; padding: 10px;

📝 การใช้งาน

เทมเพลตนี้แสดงวิธีการสร้างกล่องที่มีกรอบและการเติมขอบโดยใช้คุณสมบัติ CSS border: 1px solid #ccc; และ padding: 10px;

📘 คำอธิบาย

โค้ด CSS ข้างต้นใช้ border: 1px solid #ccc; เพื่อเพิ่มกรอบและ padding: 10px; เพื่อเพิ่มการเติมขอบภายในกล่อง นอกจากนี้ยังตั้งค่าความกว้างและระยะขอบเพื่อจัดตำแหน่งกล่องให้อยู่กลางหน้าเว็บ

🔹 โค้ดบางส่วน

กล่องนี้มีการเพิ่มกรอบและการเติมขอบแล้ว

<div class="demo-area">
  <p>กล่องนี้มีการเพิ่มกรอบและการเติมขอบแล้ว</p>
</div>

<style>
  .demo-area {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    width: 300px;
    margin: 20px auto;
  }
</style>

💻 โค้ด HTML เต็มรูปแบบ

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>CSS: เพิ่มกล่องด้วยกรอบ border: 1px solid #ccc; padding: 10px;</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    .demo-area {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
      width: 300px;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <div class="demo-area">
    <p>กล่องนี้มีการเพิ่มกรอบและการเติมขอบแล้ว</p>
  </div>
</body>
</html>

💻 โค้ดที่ทำงานได้ครบถ้วน

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>CSS: เพิ่มกล่องด้วยกรอบ border: 1px solid #ccc; padding: 10px;</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    .demo-area {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
      width: 300px;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <div class="demo-area">
    <p>กล่องนี้มีการเพิ่มกรอบและการเติมขอบแล้ว</p>
  </div>
</body>
</html>

คัดลอกแล้ว!

📌 เทคนิคการใช้งานกล่องกรอบเส้นอย่างมีประสิทธิภาพ

กล่องที่มีกรอบเส้นแบบเรียบง่ายเป็นองค์ประกอบพื้นฐานของการออกแบบเว็บไซต์ ซึ่งสามารถใช้งานได้หลากหลายสถานการณ์ การใช้ร่วมกันระหว่าง border และ padding จะช่วยแบ่งเนื้อหาให้ชัดเจนขึ้น พร้อมเพิ่มช่องว่างภายในได้อย่างเหมาะสม

🎨 ตัวเลือกการออกแบบ

เพียงแค่เปลี่ยนสไตล์ของเส้นขอบ ก็สามารถสร้างความรู้สึกที่แตกต่างได้ เช่น border: 2px dashed #999; สำหรับเส้นประ และ border: 3px double #333; สำหรับเส้นคู่ นอกจากนี้ยังสามารถเพิ่ม border-radius: 8px; เพื่อให้มุมโค้งมนและดูเป็นมิตรมากขึ้น

📱 เคล็ดลับการรองรับหน้าจอมือถือ

สำหรับอุปกรณ์มือถือ ควรลดค่า padding เช่น padding: 5px; และใช้ media query อย่าง @media (max-width: 768px) { .demo-area { width: 90%; padding: 8px; } } เพื่อปรับขนาดให้เหมาะสมกับหน้าจอขนาดเล็ก

กล่องกรอบเส้นสามารถนำไปใช้กับข้อความแจ้งเตือน ข้อมูลเสริม กลุ่มช่องกรอกฟอร์ม หรือการอธิบายคุณสมบัติของสินค้าได้อย่างมีประสิทธิภาพ หากเพิ่มสีพื้นหลัง เช่น background-color: #f9f9f9; จะช่วยให้เนื้อหาโดดเด่นมากยิ่งขึ้น

สิ่งสำคัญคือการรักษาความสม่ำเสมอของสไตล์กรอบทั่วทั้งเว็บไซต์ เช่น สี ความหนา และการใช้มุมโค้ง หากเพิ่มเงาด้วย box-shadow: 0 2px 4px rgba(0,0,0,0.1); ก็จะทำให้กล่องดูมีมิติมากยิ่งขึ้น