From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/ca/web/css/margin-bottom/index.html | 192 ++++++++++++++++++++++++++++++ 1 file changed, 192 insertions(+) create mode 100644 files/ca/web/css/margin-bottom/index.html (limited to 'files/ca/web/css/margin-bottom/index.html') diff --git a/files/ca/web/css/margin-bottom/index.html b/files/ca/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..7704f229b4 --- /dev/null +++ b/files/ca/web/css/margin-bottom/index.html @@ -0,0 +1,192 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-bottom +--- +
{{CSSRef}}
+ +

La propietat CSS margin-bottom estableix l'àrea de marge a la part inferior d'un element. Un valor positiu el situarà més enllà del normal dels seus veïns, mentre que un valor negatiu el situarà més a prop.

+ +
/* <length> values */
+margin-bottom: 10px;  /* An absolute length */
+margin-bottom: 1em;   /* relative to the text size */
+margin-bottom: 5%;    /* relative to the nearest block container's width */
+
+/* Keyword values */
+margin-bottom: auto;
+
+/* Global values */
+margin-bottom: inherit;
+margin-bottom: initial;
+margin-bottom: unset;
+
+ +

The effect of the CSS margin-bottom property on the element box

+ +

Aquesta propietat no té cap efecte sobre els elements en línia no reemplaçats, com ara {{HTMLElement("tt")}} o {{HTMLElement("span")}}.

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat margin-bottom és especificada amb la paraula clau auto, o un <length>, o un <percentage>. El seu valor pot ser positiu, zero o negatiu.

+ +

Valors

+ +
+
{{cssxref("<length>")}}
+
La grandària del marge com a valor fix.
+
{{cssxref("<percentage>")}}
+
La grandària del marge com a percentatge, en relació amb l'amplada del bloc contenidor.
+
auto
+
El navegador selecciona un valor adequat per utilitzar. Veure {{cssxref("margin")}}.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemple

+ +

HTML

+ +
<div class="container">
+<div class="box0">Box 0</div>
+<div class="box1">Box 1</div>
+<div class="box2">Box one's negative margin pulls me up</div>
+</div>
+ +

CSS

+ +

CSS per divs per establir margin-bottom i height

+ +
.box0 {
+    margin-bottom:1em;
+    height:3em;
+}
+.box1 {
+    margin-bottom:-1.5em;
+    height:4em;
+}
+.box2 {
+    border:1px dashed black;
+    border-width:1px 0;
+    margin-bottom:2em;
+}
+
+
+ +

Algunes definicions per a contenidors i divs permeten veure de manera més clara els efectes dels marges.

+ +
.container {
+    background-color:orange;
+    width:320px;
+    border:1px solid black;
+}
+div {
+    width:320px;
+    background-color:gold;
+}
+ +

{{ EmbedLiveSample('Example',350,200) }}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComenteri
{{SpecName('CSS3 Box', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS3 Box')}}No hi ha canvis significatius
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}{{Spec2('CSS3 Transitions')}}Defineix margin-bottom com animable.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}{{Spec2('CSS2.1')}}Elimina el seu efecte en elements en línia.
{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS1')}}Definició inicial
+ +

Navegadors compatibles

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}3.03.51.0 (85)
auto value1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}6.06.01.0
+
-- cgit v1.2.3-54-g00ecf