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/margin/index.html | 214 +++++++++++++++++++++++++++++++++++++ 1 file changed, 214 insertions(+) create mode 100644 files/es/web/css/margin/index.html (limited to 'files/es/web/css/margin/index.html') diff --git a/files/es/web/css/margin/index.html b/files/es/web/css/margin/index.html new file mode 100644 index 0000000000..bd0acd9524 --- /dev/null +++ b/files/es/web/css/margin/index.html @@ -0,0 +1,214 @@ +--- +title: margin +slug: Web/CSS/margin +translation_of: Web/CSS/margin +--- +
{{CSSRef}}
+ +

Resumen

+ +

La propiedad CSS margin establece el margen para los cuatro lados. Es una abreviación para evitar tener que establecer cada lado por separado con las otras propiedades de margen:  {{ cssxref("margin-top") }}, {{ cssxref("margin-right") }}, {{ cssxref("margin-bottom") }} y {{ cssxref("margin-left") }}.

+ +

También se permiten valores negativos.

+ +

{{cssinfo}}

+ +

Sintaxis

+ +
/* Aplica a todos los cuatro lados */
+margin: 1em;
+
+/* Vertical | Horizontal */
+margin: 5% auto;
+
+/* Arriba | Horizontal | Abajo */
+margin: 1em auto 2em;
+
+/* Arriba | Derecha | Abajo | Izquierda */
+margin: 2px 1em 0 auto;
+
+/* Valores globales */
+margin: inherit;
+margin: initial;
+margin: unset;
+
+ +

Valores

+ +

Acepta uno, dos , tres  o cuatro valores de los siguientes:

+ +
+
<length>
+
Especifica un ancho fijo. Valores negativos son permitidos. Mira {{cssxref("<length>")}} para conocer las posibles unidades.
+
<percentage>
+
Un {{cssxref("<percentage>")}} relativo al ancho del bloque contenedor. Se permiten valores negativos.
+
auto
+
auto es reemplazado por algún valor apropiado. Por ejemplo, puede usarse para centrar horizontalmente un elemento bloque.
+ div { width:50%;  margin:0 auto; } centrará el div horizontalmente.
+
+ + + +

Sintaxis formal

+ +
{{csssyntax}}
+ +

Ejemplos

+ +

Ejemplo simple

+ +

HTML

+ +
<div class="ex1">
+  margin:     auto;
+  background: gold;
+  width:      66%;
+</div>
+<div class="ex2">
+  margin:     20px 0 0 -20px;
+  background: gold;
+  width:      66%;
+</div>
+ +

CSS

+ +
.ex1 {
+  margin: auto;
+  background: gold;
+  width: 66%;
+}
+.ex2 {
+  margin: 20px 0px 0 -20px;
+  background: gold;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('Simple_example') }}

+ +

Otro ejemplo

+ +
margin: 5%;                /* 5% para todos los lados */
+
+margin: 10px;              /* 10px para todos los lados */
+
+margin: 1.6em 20px;        /* 1.6em arriba y abajo, 20px izquierda y derecha */
+
+margin: 10px 3% 1em;       /* 10px arriba, 3% izquierda y derecha, 1em abajo */
+
+margin: 10px 3px 30px 5px; /* 10px arriba, 3px derecha, 30px abajo, 5px izquierda */
+
+margin: 1em auto;          /* 1em arriba y abajo, centrado horizontalmente */
+
+margin: auto;              /* 0px de margen vertical, centrado horizontalmente */
+
+ +

Centrado horizontal con  margin: 0 auto;

+ +

Para centrar algo horizontalmente en navegadores modernos, usa display: flex; justify-content: center; .

+ +

Sin embargo, en navegadores antiguos como IE8-9, flexbox no está disponible. Para poder centrar un elemento horizontalmente con respecto a su contenedor, usa margin: 0 auto;

+ +

Especificaciones

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}No significant change
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}Defines margin as animatable.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Removes its effect on inline elements.
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}Initial definition
+ +

Compatibilidad en navegadores

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
auto value1.0{{ CompatGeckoDesktop("1") }}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1") }}6.06.01.0
+
+ +

 

+ +

Ver también

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