【CSS】มาร์จิ้นและแพดดิ้งพื้นฐาน｜การใช้ m-0, p-10, m-20, p-5

บทความนี้จะอธิบายวิธีการใช้คุณสมบัติ m-0, p-10, m-20, และ p-5 เพื่อปรับมาร์จิ้นและแพดดิ้งใน CSS คุณสมบัติเหล่านี้ช่วยให้คุณควบคุมพื้นที่รอบๆ และภายในขององค์ประกอบต่างๆ ได้ง่ายขึ้น

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

<div class="m-0">
  องค์ประกอบนี้มีมาร์จิ้นเป็น 0
</div>

<div class="p-10">
  องค์ประกอบนี้มีแพดดิ้งเป็น 10px
</div>

<div class="m-20">
  องค์ประกอบนี้มีมาร์จิ้นเป็น 20px
</div>

<div class="p-5">
  องค์ประกอบนี้มีแพดดิ้งเป็น 5px
</div>

<style>
.m-0 {
  margin: 0;
  background-color: rgba(255, 0, 0, 0.2); /* สีแดง */
}
.p-10 {
  padding: 10px;
  background-color: rgba(0, 255, 0, 0.2); /* สีเขียว */
}
.m-20 {
  margin: 20px;
  background-color: rgba(0, 0, 255, 0.2); /* สีน้ำเงิน */
}
.p-5 {
  padding: 5px;
  background-color: rgba(255, 255, 0, 0.2); /* สีเหลือง */
}
</style>

💻 โค้ดสมบูรณ์ (คัดลอกและวางเพื่อใช้งาน)

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>มาร์จิ้นและแพดดิ้ง</title>
  <style>
    .m-0 {
      margin: 0;
      background-color: rgba(255, 0, 0, 0.2); /* สีแดง */
    }
    .p-10 {
      padding: 10px;
      background-color: rgba(0, 255, 0, 0.2); /* สีเขียว */
    }
    .m-20 {
      margin: 20px;
      background-color: rgba(0, 0, 255, 0.2); /* สีน้ำเงิน */
    }
    .p-5 {
      padding: 5px;
      background-color: rgba(255, 255, 0, 0.2); /* สีเหลือง */
    }
  </style>
</head>
<body>
  <div class="m-0">องค์ประกอบนี้มีมาร์จิ้นเป็น 0</div>
  <div class="p-10">องค์ประกอบนี้มีแพดดิ้งเป็น 10px</div>
  <div class="m-20">องค์ประกอบนี้มีมาร์จิ้นเป็น 20px</div>
  <div class="p-5">องค์ประกอบนี้มีแพดดิ้งเป็น 5px</div>
</body>
</html>

🧩 การใช้งานและการประยุกต์

margin: 0; เป็นวิธีที่ง่ายที่สุดในการเอาพื้นที่ว่างรอบๆ ออกไป padding: 10px; ทำให้พื้นที่ภายในขององค์ประกอบนั้นมีความเรียบร้อยและมีขนาดที่เหมาะสม

📱 การใช้ร่วมกับการออกแบบที่ตอบสนอง

ในการออกแบบที่ตอบสนอง, คุณสามารถใช้ m-0 และ p-10 เพื่อปรับมาร์จิ้นและแพดดิ้งให้เหมาะสมกับขนาดหน้าจอได้. เช่น, คุณสามารถใช้ m-0 เพื่อเอามาร์จิ้นที่ไม่จำเป็นออก และปรับแพดดิ้งสำหรับอุปกรณ์มือถือได้

คลาสเหล่านี้มีประโยชน์มากโดยเฉพาะเมื่อจัดตำแหน่งฟิลด์ฟอร์มหรือปุ่มภายในอินเทอร์เฟซ

คัดลอกแล้ว!