🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【CSS】Basic Margin and Padding｜How to Use m-0, p-10, m-20, p-5

This article explains how to use m-0, p-10, m-20, and p-5 properties for setting margin and padding in CSS. These properties help control the spacing around elements and within them, making it easier to manage layout and design.

🔹 Code Example

<div class="m-0">
  This element has a margin of 0.
</div>

<div class="p-10">
  This element has a padding of 10px.
</div>

<div class="m-20">
  This element has a margin of 20px.
</div>

<div class="p-5">
  This element has a padding of 5px.
</div>

<style>
.m-0 {
  margin: 0;
  background-color: rgba(255, 0, 0, 0.2); /* Red */
}
.p-10 {
  padding: 10px;
  background-color: rgba(0, 255, 0, 0.2); /* Green */
}
.m-20 {
  margin: 20px;
  background-color: rgba(0, 0, 255, 0.2); /* Blue */
}
.p-5 {
  padding: 5px;
  background-color: rgba(255, 255, 0, 0.2); /* Yellow */
}
</style>

💻 Complete Working Code (Copy and Paste to Use)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Basic Margin and Padding</title>
  <style>
    .m-0 {
      margin: 0;
      background-color: rgba(255, 0, 0, 0.2); /* Red */
    }
    .p-10 {
      padding: 10px;
      background-color: rgba(0, 255, 0, 0.2); /* Green */
    }
    .m-20 {
      margin: 20px;
      background-color: rgba(0, 0, 255, 0.2); /* Blue */
    }
    .p-5 {
      padding: 5px;
      background-color: rgba(255, 255, 0, 0.2); /* Yellow */
    }
  </style>
</head>
<body>
  <div class="m-0">This element has a margin of 0.</div>
  <div class="p-10">This element has a padding of 10px.</div>
  <div class="m-20">This element has a margin of 20px.</div>
  <div class="p-5">This element has a padding of 5px.</div>
</body>
</html>

🧩 Applications and Usage

margin: 0; is the simplest way to remove external spacing around an element. padding: 10px; ensures that the inner space of the element is uniform and appropriately sized.

📱 Combining with Responsive Design

In responsive design, m-0 and p-10 can be used to adjust margins and padding according to the screen size. For example, m-0 can remove unnecessary margins, and padding can be adjusted for mobile devices.

These classes are especially useful when aligning form fields or buttons within an interface.

Copied!

Related Templates