files/pt-br/web/css/padding-left/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

---
title: padding-left
slug: Web/CSS/padding-left
tags:
  - CSS
  - CSS Padding
  - La
  - Reference
  - Referencia
  - Web
translation_of: Web/CSS/padding-left
---
<p>{{ CSSRef() }}</p>

<h2 id="Summary" name="Summary">Resumo</h2>

<p><code>A propriedade <a href="/en/CSS" title="CSS">CSS</a> padding-left</code> é um elemento que define o espaço de preenchimento obrigatório no lado esquerdo de um elemento. <a href="https://developer.mozilla.org/en/CSS/box_model#padding" title="http://developer.mozilla.org/en/CSS/Box_model#padding">padding area</a> <span id="ouHighlight__17_18TO24_24">é</span><span id="noHighlight_0.37112006289722665"> </span><span id="ouHighlight__20_22TO26_26">o</span><span id="noHighlight_0.6534700772538158"> </span><span id="ouHighlight__24_28TO28_33">espaço</span><span id="noHighlight_0.13116577021599884"> </span><span id="ouHighlight__30_36TO35_39">entre</span><span id="noHighlight_0.15139449256887139"> </span><span id="ouHighlight__38_40TO41_41">o</span><span id="noHighlight_0.17539196984450844"> </span><span id="ouHighlight__42_48TO43_50">conteúdo</span><span id="noHighlight_0.8779008758520587"> </span><span id="ouHighlight__50_51TO52_53">do</span><span id="noHighlight_0.873582381662804"> </span><span id="ouHighlight__53_63TO55_62">elemento</span><span id="noHighlight_0.8308349729274138"> </span><span id="ouHighlight__65_67TO64_64">e</span><span id="noHighlight_0.37729169619452807"> </span><span id="ouHighlight__69_72TO66_66">a</span><span id="noHighlight_0.4411109226872705"> </span><span id="ouHighlight__74_79TO68_72">borda</span><span id="noHighlight_0.075289951394655">.</span> <span id="ouHighlight__82_82TO75_76">Um</span><span id="noHighlight_0.6061021317865614"> </span><span id="ouHighlight__93_97TO78_82">valor</span><span id="noHighlight_0.6949002345432238"> </span><span id="ouHighlight__84_91TO84_91">negativo</span><span id="noHighlight_0.2344563426194184"> </span><span id="ouHighlight__102_104TO93_95">não</span><span id="noHighlight_0.22723106369831958"> </span><span id="ouHighlight__99_100TO97_97">é</span><span id="noHighlight_0.44876607103253296"> </span><span id="ouHighlight__106_112TO99_107">permitido</span><span id="noHighlight_0.5590915585798831">.</span></p>

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

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Syntax formal</a>: {{csssyntax("padding-left")}}
</pre>

<pre>padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;
padding-left: 10%

padding-left: inherit
</pre>

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

<dl>
 <dt><code>&lt;length&gt;</code></dt>
 <dd>
 <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
 <div><span id="ouHighlight__0_8TO0_9">Especifica</span><span id="noHighlight_0.1714015144406409"> </span><span id="ouHighlight__10_10TO11_13">uma</span><span id="noHighlight_0.8247662008546957"> </span><span id="ouHighlight__27_31TO15_21">largura</span><span id="noHighlight_0.7805001312577078"> </span><span id="ouHighlight__21_25TO23_26">fixa</span><span id="noHighlight_0.1525507882368624"> </span><span id="ouHighlight__12_19TO28_35">positiva</span><span id="noHighlight_0.16332571431491472">.</span> <span id="ouHighlight__0_2TO0_7">Consulte </span>{{cssxref("&lt;length&gt;")}} <span id="ouHighlight__27_29TO30_33">para</span><span id="noHighlight_0.6646400009278141"> </span><span id="ouHighlight__31_37TO35_48">obter detalhes</span><span id="noHighlight_0.5130446632552423">.</span></div>
 </div>
 </dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd><span id="ouHighlight__0_0TO0_1">Um</span><span id="noHighlight_0.45621228535944436"> </span><span id="ouHighlight__2_11TO3_12">percentual</span><span id="noHighlight_0.2848767381419872"> </span><span id="ouHighlight__13_27TO14_23">em relação</span><span id="noHighlight_0.6673035689744921"> </span><span id="ouHighlight__29_31TO25_25">a</span><span id="noHighlight_0.6559476142543237"> </span><span id="ouHighlight__33_37TO27_33">largura</span><span id="noHighlight_0.04053615582239656"> </span><span id="ouHighlight__39_40TO35_36">do</span><span id="noHighlight_0.945525910620689"> </span><span id="ouHighlight__57_61TO38_42">bloco.</span></dd>
</dl>

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

<pre class="brush: css">.content { padding-left: 5%; }
.sidebox { padding-left: 10px; }
</pre>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col"><span id="ouHighlight__0_12TO0_12">Especificação</span></th>
   <th scope="col">Status</th>
   <th scope="col"><span id="ouHighlight__0_6TO0_9">Comentário</span></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding-left') }}</td>
   <td>{{ Spec2('CSS3 Box') }}</td>
   <td>
    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
    <div><span id="ouHighlight__0_1TO0_6">Nenhuma</span><span id="noHighlight_0.9362666398150816"> </span><span id="ouHighlight__3_8TO8_14">mudança</span><span id="noHighlight_0.03095057428070891">.</span></div>
    </div>
   </td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-left') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td><span id="ouHighlight__0_6TO0_5">Define </span><code>padding-left</code> <span id="ouHighlight__21_22TO34_37">como</span><span id="noHighlight_0.04535255120305759"> </span><span id="ouHighlight__24_33TO39_48">animatable</span><span id="noHighlight_0.8100392147421572">.</span></td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>
    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
    <div><span id="ouHighlight__0_1TO0_6">Nenhuma</span><span id="noHighlight_0.9362666398150816"> </span><span id="ouHighlight__3_8TO8_14">mudança</span><span id="noHighlight_0.03095057428070891">.</span></div>
    </div>
   </td>
  </tr>
  <tr>
   <td>{{ Specname('CSS1', '#padding-left', 'padding-left') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>
    <div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;">
    <div><span id="ouHighlight__8_17TO0_8">Definição</span><span id="noHighlight_0.6594384050639374"> </span><span id="ouHighlight__0_6TO10_16">inicial</span><span id="noHighlight_0.46693875834835863">.</span></div>
    </div>
   </td>
  </tr>
 </tbody>
</table>

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

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th><span id="ouHighlight__0_6TO0_6">Recurso</span></th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suporte Básico</td>
   <td>1.0</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>Recurso</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>