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

【CSS】Margem e Preenchimento Básico｜Como Usar m-0, p-10, m-20, p-5

Este artigo explica como usar as propriedades m-0, p-10, m-20 e p-5 para ajustar margem e preenchimento no CSS. Essas propriedades ajudam a controlar o espaço ao redor e dentro dos elementos, facilitando a gestão do layout e o design.

🔹 Exemplo de Código

<div class="m-0">
  Este elemento tem uma margem de 0.
</div>

<div class="p-10">
  Este elemento tem um preenchimento de 10px.
</div>

<div class="m-20">
  Este elemento tem uma margem de 20px.
</div>

<div class="p-5">
  Este elemento tem um preenchimento de 5px.
</div>

<style>
.m-0 {
  margin: 0;
  background-color: rgba(255, 0, 0, 0.2); /* Vermelho */
}
.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); /* Amarelo */
}
</style>

💻 Código Completo (Copie e Cole para Usar)

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Margem e Preenchimento</title>
  <style>
    .m-0 {
      margin: 0;
      background-color: rgba(255, 0, 0, 0.2); /* Vermelho */
    }
    .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); /* Amarelo */
    }
  </style>
</head>
<body>
  <div class="m-0">Este elemento tem uma margem de 0.</div>
  <div class="p-10">Este elemento tem um preenchimento de 10px.</div>
  <div class="m-20">Este elemento tem uma margem de 20px.</div>
  <div class="p-5">Este elemento tem um preenchimento de 5px.</div>
</body>
</html>

🧩 Aplicações e Uso

margin: 0; é a forma mais simples de remover o espaço externo de um elemento. padding: 10px; garante que o espaço interno do elemento seja uniforme e adequadamente dimensionado.

📱 Combinação com Design Responsivo

No design responsivo, você pode usar m-0 e p-10 para ajustar margens e preenchimento conforme o tamanho da tela. Por exemplo, você pode usar m-0 para eliminar margens desnecessárias e ajustar o preenchimento para dispositivos móveis.

Essas classes são especialmente úteis ao alinhar campos de formulário ou botões dentro de uma interface.

Copiado!

Modelos Relacionados