initial commit

1 files changed, 189 insertions, 0 deletions

diff --git a/files/pt-br/web/css/padding/index.html b/files/pt-br/web/css/padding/index.html
new file mode 100644
index 0000000000..dc89652bd8
--- /dev/null
+++ b/files/pt-br/web/css/padding/index.html
@@ -0,0 +1,189 @@
+---
+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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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>