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

【CSS】Márgenes y Relleno Básico｜Cómo usar m-0, p-10, m-20, p-5

En este artículo, explicamos cómo usar las propiedades m-0, p-10, m-20, y p-5 para ajustar márgenes y relleno en CSS. Estas propiedades ayudan a controlar el espacio alrededor y dentro de los elementos, facilitando la gestión del diseño y la distribución.

🔹 Ejemplo de Código

<div class="m-0">
  Este elemento tiene un margen de 0.
</div>

<div class="p-10">
  Este elemento tiene un relleno de 10px.
</div>

<div class="m-20">
  Este elemento tiene un margen de 20px.
</div>

<div class="p-5">
  Este elemento tiene un relleno de 5px.
</div>

<style>
.m-0 {
  margin: 0;
  background-color: rgba(255, 0, 0, 0.2); /* Rojo */
}
.p-10 {
  padding: 10px;
  background-color: rgba(0, 255, 0, 0.2); /* Verde */
}
.m-20 {
  margin: 20px;
  background-color: rgba(0, 0, 255, 0.2); /* Azul */
}
.p-5 {
  padding: 5px;
  background-color: rgba(255, 255, 0, 0.2); /* Amarillo */
}
</style>

💻 Código Completo (Este código funciona al copiarlo y pegarlo)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Márgenes y Relleno</title>
  <style>
    .m-0 {
      margin: 0;
      background-color: rgba(255, 0, 0, 0.2); /* Rojo */
    }
    .p-10 {
      padding: 10px;
      background-color: rgba(0, 255, 0, 0.2); /* Verde */
    }
    .m-20 {
      margin: 20px;
      background-color: rgba(0, 0, 255, 0.2); /* Azul */
    }
    .p-5 {
      padding: 5px;
      background-color: rgba(255, 255, 0, 0.2); /* Amarillo */
    }
  </style>
</head>
<body>
  <div class="m-0">Este elemento tiene un margen de 0.</div>
  <div class="p-10">Este elemento tiene un relleno de 10px.</div>
  <div class="m-20">Este elemento tiene un margen de 20px.</div>
  <div class="p-5">Este elemento tiene un relleno de 5px.</div>
</body>
</html>

🧩 Aplicaciones y Uso

margin: 0; es la forma más sencilla de eliminar el margen exterior de un elemento. padding: 10px; asegura que el espacio interior del elemento esté uniforme y adecuadamente dimensionado.

📱 Combinación con Diseño Responsivo

En diseño responsivo, puedes usar m-0 y p-10 para ajustar márgenes y relleno según el tamaño de la pantalla. Por ejemplo, puedes usar m-0 para eliminar márgenes innecesarios y ajustar el relleno para dispositivos móviles.

Estas clases son especialmente útiles cuando se alinean campos de formulario o botones dentro de una interfaz.

¡Copiado!

Plantillas Relacionadas