This translation is incomplete. Please help translate this article from English.

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 <tt> o <span>.

Initial value0
Applies toall elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
Inheritedno
Percentagesrefer to the width of the containing block
Mediavisual
Computed valuethe percentage as specified or the absolute length
Animation typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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

<length>
La grandària del marge com a valor fix.
<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 margin.

Sintaxi formal

<length> | <percentage> | auto

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;
}

Especificacions

Especificació Estat Comenteri
CSS Basic Box Model
The definition of 'margin-bottom' in that specification.
Working Draft No hi ha canvis significatius
CSS Transitions
The definition of 'margin-bottom' in that specification.
Working Draft Defineix margin-bottom com animable.
CSS Level 2 (Revision 1)
The definition of 'margin-bottom' in that specification.
Recommendation Elimina el seu efecte en elements en línia.
CSS Level 1
The definition of 'margin-bottom' in that specification.
Recommendation Definició inicial

Navegadors compatibles

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suport bàsic 1.0 (Yes) 1.0 (1.7 or earlier) 3.0 3.5 1.0 (85)
auto value 1.0 (Yes) 1.0 (1.7 or earlier) 6.0 (strict mode) 3.5 1.0 (85)
Descripció Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suport bàsic 1.0 (Yes) 1.0 (1) 6.0 6.0 1.0

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,