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
|
---
title: padding
slug: Web/CSS/padding
tags:
- Propiedades CSS
translation_of: Web/CSS/padding
---
<p>{{CSSRef}}</p>
<h2 id="Resumen">Resumen</h2>
<p>La propiedad CSS <strong><code>padding</code></strong> establece el espacio de relleno requerido por todos los lados de un elemento. El <a href="/en/CSS/box_model#padding" title="http://developer.mozilla.org/en/CSS/Box_model#padding">área de padding</a> es el espacio entre el contenido del elemento y su borde (<code>border</code>). No se permiten valores negativos.</p>
<p>La propiedad padding es un atajo para evitar la asignación de cada lado por separado (<code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>).</p>
<p>{{EmbedInteractiveExample("pages/css/padding.html")}}</p>
<div class="blockIndicator note">
<p><strong>Nota:</strong> Padding crea espacio extra dentro de un elemento. En contraste, <code>margin</code> crea espacio extra <em>alrededor </em>de un elemento.</p>
</div>
<p>{{cssinfo}}</p>
<h2 id="Sintaxis">Sintaxis</h2>
<pre class="syntaxbox notranslate"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Sintaxis formal</a>: {{csssyntax("padding")}}</pre>
<h3 id="Valores">Valores</h3>
<p>Esta propiedad puede ser especificada utilizando uno, dos, tres o cuatro de los siguientes valores:</p>
<dl>
<dt><code><length></code></dt>
<dd>Especifica un ancho fijo no negativo. Ver más detalles {{ cssxref("<length>") }} .</dd>
<dt><code><percentage></code></dt>
<dd>Con respecto a la anchura("width") del bloque que lo contiene.</dd>
</dl>
<ul>
<li><strong>Uno:</strong> un valor unico se aplica a los 4 lados.</li>
<li><strong>Dos:</strong> el primer valor se aplica a <strong>arriba y abajo</strong>, el segundo valor se aplica a <strong>derecha e izquierda</strong>.</li>
<li><strong>Tres:</strong> el primer valor se aplica a <strong>arriba</strong>, el segundo valor a <strong>derecha e izquierda</strong> y el tercer valor se aplica a <strong>abajo </strong>del elemento.</li>
<li><strong>Cuatro:</strong> el primer valor se aplica a <strong>arriba</strong>, el segundo valor se aplica a la <strong>derecha</strong>, el tercer valor se aplica a <strong>abajo </strong>y el cuarto valor se aplica a la <strong>izquierda</strong>. </li>
</ul>
<h3 id="Ejemplos">Ejemplos</h3>
<pre class="brush: css notranslate"> padding: 5%; /* aplica 5% de padding en todos los lados*/
</pre>
<pre class="brush: css notranslate"> padding: 10px; /* aplica 10px de padding en todos los lados */
</pre>
<pre class="brush: css notranslate"> padding: 10px 20px; /* arriba y abajo, 10px de padding */
/* izquierda y derecha, 20px de padding */
</pre>
<pre class="brush: css notranslate"> padding: 10px 3% 20px; /* arriba, 10px de padding */
/* izquierda y derecha, 3% de padding */
/* bottom, 20px padding */
</pre>
<pre class="brush: css notranslate"> padding: 1em 3px 30px 5px; /* arriba 1em padding */
/* derecha 3px padding */
/* abajo 30px padding */
/* izquierda 5px padding
/* en dirección de las agujas del reloj */
</pre>
<p style="padding: 5% 1em; border: outset currentColor;">border:outset; padding:5% 1em;</p>
<h2 id="Live_Sample" name="Live_Sample">Ver ejemplo</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><h4>¡Hola Mundo!</h4>
<h3>El padding es diferente en esta linea.</h3>
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">h4{
background-color: green;
padding: 50px 20px 20px 50px;
}
h3{
background-color: blue;
padding: 400px 50px 50px 400px;
}
</pre>
<p>{{ EmbedLiveSample('Live_Sample', 'Live Sample Link', 300) }}</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
<th scope="col">Comentario</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}</td>
<td>{{ Spec2('CSS3 Box') }}</td>
<td>Sin cambio.</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Sin cambio.</td>
</tr>
<tr>
<td>{{ Specname('CSS1', '#padding', 'padding') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Definición inicial.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidad en navegadores</h2>
{{Compat("css.properties.padding")}}
<h2 id="Ver_también">Ver también</h2>
<ul>
<li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">CSS Box Model</a></li>
</ul>
|
