เพิ่มระยะห่างภายในช่องกรอกข้อความฟอร์มด้วย CSS

เพื่อเพิ่มระยะห่างภายในช่องกรอกข้อความฟอร์ม ให้ใช้คุณสมบัติ CSS padding

ตัวอย่างโค้ด

ลองรันโค้ดด้านล่าง:

<!DOCTYPE html>
<html>
<head>
  <style>
    input[type="text"] {
      width: 100%;
      padding: 10px 15px;
      margin: 5px 0;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <p>กรอกฟอร์มด้านล่าง:</p>
  <form>
    <label for="subject">Subject</label>
    <input type="text" id="subject" name="sub">
    <label for="student">Student</label>
    <input type="text" id="student" name="stu">
  </form>
</body>
</html>

คำอธิบาย: padding: 10px 15px กำหนดระยะห่างบน-ล่าง 10px ซ้าย-ขวา 15px box-sizing: border-box สำคัญมาก เพราะทำให้ padding ไม่เพิ่มความกว้างรวมของอิลิเมนต์เกิน 100%