---
title: padding
slug: Web/CSS/padding
translation_of: Web/CSS/padding
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary">A propriedade <strong><code>padding</code></strong> define uma a distância entre o conteúdo de um elemento e suas bordas.</span> É um atalho que evita definir uma distância para cada lado separadamente (<code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>).</p>

<pre class="brush:css no-line-numbers">/* Aplica-se à todas as bordas */
padding: 1em;

/* vertical | horizontal */
padding: 5% 10%;

/* superior | horizontal | inferior */
padding: 1em 2em 2em;

/* superior | direita | inferior | esquerda */
padding: 2px 1em 0 1em;

/* Valores globais */
padding: inherit;
padding: initial;
padding: unset;
</pre>

<p>{{cssinfo}}</p>

<h2 id="Sintaxe">Sintaxe</h2>

<p>A propriedade <code>padding</code> pode ser utilizada usando um, dois, três ou todos os quatro valores. Cada valor é um <code><a href="#&lt;length>">&lt;comprimento&gt;</a></code> ou uma <code><a href="#&lt;percentage>">&lt;porcentagem&gt;</a></code>.</p>

<ul>
 <li>Quando<strong> um</strong> único é valor utilizado, ele se aplica a todos os <strong>quatro lados</strong>.</li>
 <li>Se<strong> Dois</strong> valores forem utilizados o primeiro se aplica às bordas verticais (<strong>superior e inferior</strong>) e o segundo se aplica às bordas horizontais (<strong>esquerda e direita</strong>).</li>
 <li>Quando<strong> Três</strong> valores são utilizados o primeiro se aplica à borda <strong>superior</strong>, o segundo será utilizado tanto para a borda <strong>esquerda quanto para a borda direita</strong>. O terceiro será aplicado à borda <strong>inferior</strong>.</li>
 <li>Com<strong> Quatro</strong> valores a ordem de aplicação é: <strong>superior, direita, inferior e esquerda</strong> (de acordo com o movimento dos ponteiros do relógio).</li>
</ul>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><a id="&lt;length>" name="&lt;length>"><code>&lt;comprimento&gt;</code></a></dt>
 <dd>Media do comprimento. Não pode ser negativo. Veja {{cssxref("&lt;length&gt;")}} para maiores detalhes.</dd>
 <dt><a id="&lt;percentage>" name="&lt;percentage>"><code>&lt;porcentagem&gt;</code></a></dt>
 <dd>Valor percentual que é aplicado em relação à <strong>largura</strong> do bloco contido.</dd>
</dl>

<h3 id="Sintaxe_formal">Sintaxe formal</h3>

{{csssyntax}}

<h2 id="Exemplos">Exemplos</h2>

<pre class="brush: css"> padding: 5%;                /* padding 5% em todos os lados */
</pre>

<pre class="brush: css"> padding: 10px;              /* padding 10px em todos os lados */
</pre>

<pre class="brush: css"> padding: 10px 20px;         /*  10px acima e abaixo  */
                             /*  20px esquerda e direita  */
</pre>

<pre class="brush: css"> padding: 10px 3% 20px;      /*  10px acima          */
                             /*  3% esquerda e direita */
                             /*  20px abaixo       */
</pre>

<pre class="brush: css"> padding: 1em 3px 30px 5px;  /*  acima    1em  padding  */
                             /*  direita  3px  padding  */
                             /*  abaixo   30px padding  */
                             /*  esquerda 5px  padding  */
</pre>

<p style="padding: 5% 1em; border: outset currentColor;">border:outset; padding:5% 1em;</p>

<h2 id="Live_Sample" name="Live_Sample">Amostra</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;h4&gt;Hello world!&lt;/h4&gt;
&lt;h3&gt;O padding é diferente nesta linha.&lt;/h3&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">h4{
  background-color: green;
  padding: 50px 20px 20px 50px;
}

h3{
  background-color: blue;
  padding: 400px 50px 50px 400px;
}
</pre>

<p>{{ LiveSampleLink('Live_Sample', 'Amostra') }}</p>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Observações</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}</td>
   <td>{{ Spec2('CSS3 Box') }}</td>
   <td>Sem alteração</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Sem alteração</td>
  </tr>
  <tr>
   <td>{{ Specname('CSS1', '#padding', 'padding') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>Definição inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>1.0 (1.0)</td>
   <td>4.0</td>
   <td>3.5</td>
   <td>1.0 (85)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li>
</ul>