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/padding/index.html | 255 ++++++++++++++++++++++++++++++++++++ 1 file changed, 255 insertions(+) create mode 100644 files/ca/web/css/padding/index.html (limited to 'files/ca/web/css/padding/index.html') 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 +--- +
{{CSSRef}}
+ +

La propietat CSS padding estableix l'àrea de farcit 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")}}.

+ +
/* 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;
+
+ + + +

{{EmbedLiveSample("padding", "100%", 280, "", "", "example-outcome-frame")}}

+ +

{{cssinfo}}

+ +

Sintaxi

+ +

La propietat padding es pot especificar utilitzant un, dos, tres o quatre valors. Cada valor és un <length> o un <percentage>.

+ + + +

Valors

+ +
+
{{cssxref("length")}}
+
La grandària del farcit com a valor fix. Ha de ser no negatiu.
+
{{cssxref("percentage")}}
+
La grandària del farcit com a percentatge, en relació amb l'amplada del bloc contenidor. Ha de ser no negatiu.
+
+ +

Sintaxi formal

+ +
{{csssyntax}}
+ +

Exemples

+ +

Exemple senzill

+ +

HTML

+ +
<h4>This element has moderate padding.</h4>
+<h3>The padding is huge in this element!</h3>
+
+ +

CSS

+ +
h4 {
+  background-color: lime;
+  padding: 20px 50px;
+}
+
+h3 {
+  background-color: cyan;
+  padding: 110px 50px 50px 110px;
+}
+
+ +

{{EmbedLiveSample('Simple_example','100%',300)}}

+ +

Més exemples

+ +
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  */
+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}{{ Spec2('CSS3 Box') }}No canvia.
{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}{{ Spec2('CSS2.1') }}No canvia.
{{ Specname('CSS1', '#padding', 'padding') }}{{ Spec2('CSS1') }}Definició inicial.
+ +

Navegadors compatibles

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suport bàsic1.0{{CompatVersionUnknown}}1.0 (1.0)4.03.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suport bàsic{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Vegeu també

+ + -- cgit v1.2.3-54-g00ecf