From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/web/css/padding/index.html | 178 ++++++++++++++++++++++++++++++++++++ 1 file changed, 178 insertions(+) create mode 100644 files/es/web/css/padding/index.html (limited to 'files/es/web/css/padding') diff --git a/files/es/web/css/padding/index.html b/files/es/web/css/padding/index.html new file mode 100644 index 0000000000..fdff58428a --- /dev/null +++ b/files/es/web/css/padding/index.html @@ -0,0 +1,178 @@ +--- +title: padding +slug: Web/CSS/padding +tags: + - Propiedades CSS +translation_of: Web/CSS/padding +--- +

{{CSSRef}}

+ +

Resumen

+ +

La propiedad CSS padding establece el espacio de relleno requerido por todos los lados de un elemento. El área de padding es el espacio entre el contenido del elemento y su borde (border). No se permiten valores negativos.

+ +

La propiedad padding es un atajo para evitar la asignación de cada lado por separado (padding-top, padding-right, padding-bottom, padding-left).

+ +

{{EmbedInteractiveExample("pages/css/padding.html")}}

+ +
+

Nota: Padding crea espacio extra dentro de un elemento. En contraste, margin crea espacio extra alrededor de un elemento.

+
+ +

{{cssinfo}}

+ +

Sintaxis

+ +
Sintaxis formal: {{csssyntax("padding")}}
+ +

Valores

+ +

Esta propiedad puede ser especificada utilizando uno, dos, tres o cuatro de los siguientes valores:

+ +
+
<length>
+
Especifica un ancho fijo no negativo. Ver más detalles {{ cssxref("<length>") }} .
+
<percentage>
+
Con respecto a la anchura("width") del bloque que lo contiene.
+
+ + + +

Ejemplos

+ +
 padding: 5%;               /* aplica 5% de padding en todos los lados*/
+
+ +
 padding: 10px;              /* aplica 10px de padding en todos los lados */
+
+ +
 padding: 10px 20px;         /*  arriba y abajo, 10px de padding */
+                             /* izquierda y derecha, 20px de padding */
+
+ +
 padding: 10px 3% 20px;      /*  arriba, 10px de padding          */
+                             /*  izquierda y derecha, 3% de padding */
+                             /*  bottom, 20px padding       */
+
+ +
 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 */
+
+ +

border:outset; padding:5% 1em;

+ +

Ver ejemplo

+ +

HTML

+ +
<h4>¡Hola Mundo!</h4>
+<h3>El padding es diferente en esta linea.</h3>
+
+ +

CSS

+ +
h4{
+  background-color: green;
+  padding: 50px 20px 20px 50px;
+}
+
+h3{
+  background-color: blue;
+  padding: 400px 50px 50px 400px;
+}
+
+ +

{{ LiveSampleLink('Live_Sample', 'Live Sample Link') }}

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaciónEstadoComentario
{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}{{ Spec2('CSS3 Box') }}Sin cambio.
{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }}{{ Spec2('CSS2.1') }}Sin cambio.
{{ Specname('CSS1', '#padding', 'padding') }}{{ Spec2('CSS1') }}Definición inicial.
+ +

Compatibilidad en navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Soporte básico1.01.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
CaracterísticasAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Soporte básico{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Ver también

+ + -- cgit v1.2.3-54-g00ecf