diff options
Diffstat (limited to 'files/ca/web/css/margin/index.html')
| -rw-r--r-- | files/ca/web/css/margin/index.html | 303 |
1 files changed, 0 insertions, 303 deletions
diff --git a/files/ca/web/css/margin/index.html b/files/ca/web/css/margin/index.html deleted file mode 100644 index 7c69f135d5..0000000000 --- a/files/ca/web/css/margin/index.html +++ /dev/null @@ -1,303 +0,0 @@ ---- -title: margin -slug: Web/CSS/margin -tags: - - CSS - - CSS Property - - Reference -translation_of: Web/CSS/margin -translation_of_original: Web/CSS/margin-new ---- -<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> - -{{csssyntax}} - -<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> |