diff options
Diffstat (limited to 'files/ca/web/css/padding/index.html')
| -rw-r--r-- | files/ca/web/css/padding/index.html | 255 |
1 files changed, 255 insertions, 0 deletions
diff --git a/files/ca/web/css/padding/index.html b/files/ca/web/css/padding/index.html new file mode 100644 index 0000000000..7e93cddcf1 --- /dev/null +++ b/files/ca/web/css/padding/index.html @@ -0,0 +1,255 @@ +--- +title: padding +slug: Web/CSS/padding +tags: + - CSS + - CSS Padding + - CSS Property + - NeedsMobileBrowserCompatibility + - Reference +translation_of: Web/CSS/padding +--- +<div>{{CSSRef}}</div> + +<p>La propietat <a href="/en/CSS" title="CSS">CSS</a> <strong><code>padding</code></strong> estableix l'<a href="/en/CSS/box_model#padding-area" title="http://developer.mozilla.org/en/CSS/Box_model#padding">àrea de farcit</a> als quatre costats d'un element. És una abreviatura que estableix tots els farcits individuals alhora: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} i {{cssxref("padding-left")}}.</p> + +<pre class="brush:css no-line-numbers">/* Apply to all four sides */ +padding: 1em; + +/* vertical | horizontal */ +padding: 5% 10%; + +/* top | horizontal | bottom */ +padding: 1em 2em 2em; + +/* top | right | bottom | left */ +padding: 5px 1em 0 1em; + +/* Global values */ +padding: inherit; +padding: initial; +padding: unset; +</pre> + +<div class="hidden" id="padding"> +<pre class="brush: html"><div class="grid"> + <div class="col"> + <div class="cell"> + <div class="p p0">padding: 0</div> + </div> + <div class="cell"> + <div class="p p1">padding: 1em</div> + </div> + <div class="cell"> + <div class="p p2">padding: 5% 10%</div> + </div> + <div class="cell"> + <div class="p p3">padding: 1em 2em 2em</div> + </div> + <div class="cell"> + <div class="p p4">padding: 5px 1em 0 1em</div> + </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: left; +} + +.p { + display: inline-block; + background: #E4F0F5; + border: 1px solid; +} + +.p0 { padding: 0; } +.p1 { padding: 1em; } +.p2 { padding: 5% 10%; } +.p3 { padding: 1em 2em 2em; } +.p4 { padding: 5px 1em 0 1em; }</pre> +</div> + +<p>{{EmbedLiveSample("padding", "100%", 280, "", "", "example-outcome-frame")}}</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<p>La propietat <code>padding</code> es pot especificar utilitzant un, dos, tres o quatre valors. Cada valor és un <code><a href="#<length>"><length></a></code> o un <code><a href="#<percentage>"><percentage></a></code>.</p> + +<ul> + <li>Quan s'especifica <strong>un</strong> valor, s'aplica el mateix farcit <strong>als quatre costats</strong>.</li> + <li>Quan s'especifiquen <strong>dos</strong> valors, el primer farcit 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 farcit 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 farcits 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 farcit com a valor fix. Ha de ser no negatiu.</dd> + <dt>{{cssxref("percentage")}}</dt> + <dd>La grandària del farcit com a percentatge, en relació amb l'amplada del bloc contenidor. Ha de ser no negatiu.</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"><h4>This element has moderate padding.</h4> +<h3>The padding is huge in this element!</h3> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">h4 { + background-color: lime; + padding: 20px 50px; +} + +h3 { + background-color: cyan; + padding: 110px 50px 50px 110px; +} +</pre> + +<p><span>{{EmbedLiveSample('Simple_example','100%',300)}}</span></p> + +<h3 id="Més_exemples"><span>Més exemples</span></h3> + +<pre class="brush: css">padding: 5%; /* all sides: 5% padding */ + +padding: 10px; /* all sides: 10px padding */ + +padding: 10px 20px; /* top and bottom: 10px padding */ + /* left and right: 20px padding */ + +padding: 10px 3% 20px; /* top: 10px padding */ + /* left and right: 3% padding */ + /* bottom: 20px padding */ + +padding: 1em 3px 30px 5px; /* top: 1em padding */ + /* right: 3px padding */ + /* bottom: 30px padding */ + /* left: 5px padding */ </pre> + +<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', '#the-padding', 'padding') }}</td> + <td>{{ Spec2('CSS3 Box') }}</td> + <td>No canvia.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}</td> + <td>{{ Spec2('CSS2.1') }}</td> + <td>No canvia.</td> + </tr> + <tr> + <td>{{ Specname('CSS1', '#padding', 'padding') }}</td> + <td>{{ Spec2('CSS1') }}</td> + <td>Definició inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">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>1.0 (1.0)</td> + <td>4.0</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 Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</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>La propietat abreujada <code>padding</code> es pot utilitzar per establir farcits en els quatre costats d'un element amb una única declaració: {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} i {{cssxref("padding-left")}}.</li> +</ul> |