From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/padding/index.html | 189 +++++++++++++++++++++++++++++++++ 1 file changed, 189 insertions(+) create mode 100644 files/pt-br/web/css/padding/index.html (limited to 'files/pt-br/web/css/padding') 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 +--- +
{{CSSRef}}
+ +

A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente (padding-top, padding-right, padding-bottom, padding-left).

+ +
/* 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;
+
+ +

{{cssinfo}}

+ +

Sintaxe

+ +

A propriedade padding pode ser utilizada usando um, dois, três ou todos os quatro valores. Cada valor é um <comprimento> ou uma <porcentagem>.

+ + + +

Valores

+ +
+
<comprimento>
+
Media do comprimento. Não pode ser negativo. Veja {{cssxref("<length>")}} para maiores detalhes.
+
<porcentagem>
+
Valor percentual que é aplicado em relação à largura do bloco contido.
+
+ +

Sintaxe formal

+ +
{{csssyntax}}
+ +

Exemplos

+ +
 padding: 5%;                /* padding 5% em todos os lados */
+
+ +
 padding: 10px;              /* padding 10px em todos os lados */
+
+ +
 padding: 10px 20px;         /*  10px acima e abaixo  */
+                             /*  20px esquerda e direita  */
+
+ +
 padding: 10px 3% 20px;      /*  10px acima          */
+                             /*  3% esquerda e direita */
+                             /*  20px abaixo       */
+
+ +
 padding: 1em 3px 30px 5px;  /*  acima    1em  padding  */
+                             /*  direita  3px  padding  */
+                             /*  abaixo   30px padding  */
+                             /*  esquerda 5px  padding  */
+
+ +

border:outset; padding:5% 1em;

+ +

Amostra

+ +

HTML

+ +
<h4>Hello world!</h4>
+<h3>O padding é diferente nesta linha.</h3>
+
+ +

CSS

+ +
h4{
+  background-color: green;
+  padding: 50px 20px 20px 50px;
+}
+
+h3{
+  background-color: blue;
+  padding: 400px 50px 50px 400px;
+}
+
+ +

{{ LiveSampleLink('Live_Sample', 'Amostra') }}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusObservações
{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}{{ Spec2('CSS3 Box') }}Sem alteração
{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}{{ Spec2('CSS2.1') }}Sem alteração
{{ Specname('CSS1', '#padding', 'padding') }}{{ Spec2('CSS1') }}Definição inicial
+ +

Compatibilidade

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf