---
title: padding-bottom
slug: Web/CSS/padding-bottom
tags:
  - CSS
  - CSS Padding
  - CSS Property
  - Reference
translation_of: Web/CSS/padding-bottom
---
<div>{{CSSRef}}</div>

<p>De  <a href="/nl/CSS" title="CSS">CSS</a>-eigenschap <strong><code>padding-bottom</code></strong> stelt de hoogte in van de vulling aan de onderkant van een element. Voor padding is het, in tegenstelling tot margins, niet toegestaan om negatieve waarden te gebruiken. De verkorte notatie voor {{cssxref("padding")}} kan worden gebruikt om binnen één declaratie de vulling aan alle vier de kanten in te stellen.</p>

<pre class="brush:css no-line-numbers">/* &lt;length&gt; values */
padding-bottom: 0.5em;
padding-bottom: 0;
padding-bottom: 2cm;

/* &lt;percentage&gt; value */
padding-bottom: 10%;

/* Global values */
padding-bottom: inherit;
padding-bottom: initial;
padding-bottom: unset;
</pre>

<p>De <a href="/en/CSS/box_model#padding-area" title="http://developer.mozilla.org/en/CSS/Box_model#padding">paddingruimte</a> is de ruimte tussen de inhoud en de rand van een element.</p>

<p><img alt="The effect of the CSS padding-bottom property on the element box" src="/files/4109/padding-bottom.svg" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>

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

<h2 id="Syntaxis">Syntaxis</h2>

<h3 id="Waarden">Waarden</h3>

<dl>
 <dt>{{cssxref("length")}}</dt>
 <dd>De grootte van de padding als vaste waarde. Mag niet negatief zijn.</dd>
 <dt>{{cssxref("percentage")}}</dt>
 <dd>De grootte van de padding als een percentage, relatief aan de <em>breedte</em> van het element waarin het betreffende element staat. Mag niet negatief zijn.</dd>
</dl>

<h3 id="Formele_syntaxis">Formele syntaxis</h3>

{{csssyntax}}

<h2 id="Voorbeelden">Voorbeelden</h2>

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

<h2 id="Specificaties">Specificaties</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specificatie</th>
   <th scope="col">Status</th>
   <th scope="col">Opmerking</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }}</td>
   <td>{{ Spec2('CSS3 Box') }}</td>
   <td>Geen verandering ten opzichte van {{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td>Definieert <code>padding-bottom</code> als animeerbaar.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>Geen verandering ten opzichte van {{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}.</td>
  </tr>
  <tr>
   <td>{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>Aanvankelijke definitie.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browsercompatibiliteit">Browsercompatibiliteit</h2>



<p>{{Compat("css.properties.padding-bottom")}}</p>

<h2 id="Zie_ook">Zie ook</h2>

<ul>
 <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Boxmodel</a></li>
 <li>De verkorte notatie voor {{cssxref("padding")}} kan worden gebruikt om binnen één declaratie de vulling aan alle vier de kanten in te stellen: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, <code>padding-bottom</code> en {{cssxref("padding-left")}}.</li>
</ul>