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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
---
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>{{ LiveSampleLink('Live_Sample', 'Live Sample Link') }}</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>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Características</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Soporte 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>Características</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Soporte básico</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<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>
|
