---
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>