diff options
Diffstat (limited to 'files/ca/web/css/margin/index.html')
| -rw-r--r-- | files/ca/web/css/margin/index.html | 302 |
1 files changed, 302 insertions, 0 deletions
diff --git a/files/ca/web/css/margin/index.html b/files/ca/web/css/margin/index.html new file mode 100644 index 0000000000..514a06cd6a --- /dev/null +++ b/files/ca/web/css/margin/index.html @@ -0,0 +1,302 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin +--- +<div>{{CSSRef}}</div> + +<p>La propietat <a href="/en/CSS">CSS</a> <strong><code>margin</code></strong> estableix l'àrea del marge en els quatre costats d'un element. És una abreviatura que estableix tots els marges individuals alhora: {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} i {{cssxref("margin-left")}}.</p> + +<pre class="brush:css no-line-numbers">/* Apply to all four sides */ +margin: 1em; + +/* vertical | horizontal */ +margin: 5% auto; + +/* top | horizontal | bottom */ +margin: 1em auto 2em; + +/* top | right | bottom | left */ +margin: 2px 1em 0 auto; + +/* Global values */ +margin: inherit; +margin: initial; +margin: unset; +</pre> + +<div class="hidden" id="margin"> +<pre class="brush: html"><div class="grid"> + <div class="col"> + <div class="cell"> + <div class="m m0">margin: 0</div> + </div> + <div class="cell"> + <div class="m m1">margin: 1em</div> + </div> + <div class="cell"> + <div class="m m2">margin: 5% auto</div> + </div> + <div class="cell"> + <div class="m m3">margin: 1em auto 2em</div> + </div> + <div class="cell"> + <div class="m m4">margin: 5px 1em 0 auto</div> + </div> + <div class="note">All the boxes above have the same width of 50%</div> + </div> +</div></pre> + +<pre class="brush: css">html,body { + height: 100%; + box-sizing: border-box; +} + +.grid { + width: 100%; + height: 100%; + display: flex; + background: #EEE; + font: 1em monospace; +} + +.col { + display: flex; + flex: 1 auto; + flex-direction: column; +} + +.cell { + box-sizing: border-box; + margin: .5em; + padding: 0; + background-color: #FFF; + overflow: hidden; + text-align: center; +} + +.note { + background: #fff3d4; + padding: 1em; + margin: .5em; + font: .8em sans-serif; + text-align: center; + flex: none; +} + +.m { + display: block; + width: 50%; + text-align: left; + background: #E4F0F5; + padding: .5em; + border: 1px solid; +} + +.m0 { margin: 0; } +.m1 { margin: 1em; } +.m2 { margin: 5% auto; } +.m3 { margin: 1em auto 2em; } +.m4 { margin: 5px 1em 0 auto; }</pre> +</div> + +<p>{{EmbedLiveSample("margin", "100%", 400, "", "", "example-outcome-frame")}}</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<p>La propietat <code>margin</code> es pot especificar usant un, dos, tres o quatre valors. Cada valor és un <code><a href="#<length>"><length></a></code>, un <code><a href="#<percentage>"><percentage></a></code>, o la paraula clau <code><a href="#auto">auto</a></code>. Cada valor pot ser positiu, zero o negatiu.</p> + +<ul> + <li>Quan s'especifica <strong>un</strong> valor, s'aplica el mateix marge als <strong>quatre costats</strong>.</li> + <li>Quan s'especifiquen <strong>dos</strong> valors, el primer marge s'aplica a la part <strong>superior i inferior</strong>, el segon a l'<strong>esquerra i a la dreta</strong>.</li> + <li>Quan s'especifiquen <strong>tres</strong> valors, el primer marge s'aplica a la part <strong>superior</strong>, el segon a l'<strong>esquerra i a la dreta</strong>, el tercer a la part <strong>inferior</strong>.</li> + <li>Quan s'especifiquen <strong>quatre</strong> valors, els marges s'apliquen a la part <strong>superior, dreta, inferior </strong>i<strong> esquerra</strong> en aquest ordre (en el sentit de les agulles del rellotge).</li> +</ul> + +<h3 id="Valors">Valors</h3> + +<dl> + <dt><strong>{{cssxref("length")}}</strong></dt> + <dd>La grandària del marge com a valor fix.</dd> + <dt>{{cssxref("percentage")}}</dt> + <dd>La grandària del marge com a percentatge, en relació amb l'<em>amplada</em> del bloc contenidor.</dd> + <dt><code>auto</code></dt> + <dd>El navegador selecciona un marge adequat per utilitzar-lo. Per exemple, en alguns casos aquest valor es pot utilitzar per centrar un element.</dd> +</dl> + +<h3 id="Sintaxi_formal">Sintaxi formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_senzill">Exemple senzill</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="center">This element is centered.</div> + +<div class="outside">This element is positioned outside of its container.</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css; highlight:[2,8]">.center { + margin: auto; + background: lime; + width: 66%; +} + +.outside { + margin: 3rem 0 0 -3rem; + background: cyan; + width: 66%; +}</pre> + +<p>{{ EmbedLiveSample('Simple_example','100%',120) }}</p> + +<h3 id="Més_exemples"><span class="short_text" id="result_box" lang="ca"><span>Més exemples</span></span></h3> + +<pre class="brush: css">margin: 5%; /* all sides: 5% margin */ + +margin: 10px; /* all sides: 10px margin */ + +margin: 1.6em 20px; /* top and bottom: 1.6em margin */ + /* left and right: 20px margin */ + +margin: 10px 3% 1em; /* top: 10px margin */ + /* left and right: 3% margin */ + /* bottom: 1em margin */ + +margin: 10px 3px 30px 5px; /* top: 10px margin */ + /* right: 3px margin */ + /* bottom: 30px margin */ + /* left: 5px margin */ + +margin: 2em auto; /* top and bottom: 2em margin */ + /* box is horizontally centered */ + +margin: auto; /* top and bottom: 0 margin */ + /* box is horizontally centered */ +</pre> + +<h2 id="Notes">Notes</h2> + +<h3 id="Centrat_horitzontal"><span id="result_box" lang="ca"><span>Centrat horitzontal</span></span></h3> + +<p>Per centrar alguna cosa horitzontalment en els navegadors moderns, podeu utilitzar <code><a href="/en-US/docs/Web/CSS/display">display</a>: flex; <a href="/en-US/docs/Web/CSS/justify-content">justify-content</a>: center;</code> .</p> + +<p>Tanmateix, en navegadors antics com IE8-9 que no admeten el disseny de flexbox, aquests no estan disponibles. Per centrar un element dins del seu pare, utilitzeu <code>margin: 0 auto;</code> .</p> + +<h3 id="Col.lapse_del_marge">Col.lapse del marge</h3> + +<p>Els marges superior i inferior d'elements solen col·lapsar-se en un únic marge igual al major dels dos marges. Consulteu <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Dominar el col.lapse del marge</a> per obtenir més informació.</p> + +<h2 id="Especificacions">Especificacions</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificació</th> + <th scope="col">Estat</th> + <th scope="col">Comentari</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Box', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>No hi ha canvis significatius</span></span> .</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}</td> + <td>{{ Spec2('CSS3 Transitions') }}</td> + <td>Defineix <code>margin</code> com animable.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td><span class="short_text" id="result_box" lang="ca"><span>Elimina el seu efecte en elements en línia</span></span> .</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#margin', 'margin') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definició iniciaI.</td> + </tr> + </tbody> +</table> + +<h2 id="Navegadors_compatibles">Navegadors compatibles</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Descripció</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + <tr> + <td><code>auto</code> value</td> + <td>1.0</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("1") }}</td> + <td>6.0 (strict mode)</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>Descripció</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>1.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile("1") }}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a class="internal" href="/en/CSS/box_model" title="en/CSS/box model">Model de caixa CSS</a></li> + <li><a class="internal" href="/en/CSS/margin_collapsing" title="en/CSS/margin collapsing">Col.lapse del marge</a></li> +</ul> |