From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/fa/web/css/margin/index.html | 207 +++++++++++++++++++++++++++++++++++++ 1 file changed, 207 insertions(+) create mode 100644 files/fa/web/css/margin/index.html (limited to 'files/fa/web/css/margin') diff --git a/files/fa/web/css/margin/index.html b/files/fa/web/css/margin/index.html new file mode 100644 index 0000000000..c29a75ea06 --- /dev/null +++ b/files/fa/web/css/margin/index.html @@ -0,0 +1,207 @@ +--- +title: margin +slug: Web/CSS/margin +translation_of: Web/CSS/margin +--- +
{{CSSRef()}}
+ +

خلاصه مطلب

+ +

خواصیت margin درCSS حاشیه را برای چهار طرف عنصر مشخص می کند. این خواصیت خلاصه شده چهار خواصیت {{ Cssxref("margin-top") }} ،  {{ Cssxref("margin-right") }} ، {{ Cssxref("margin-bottom") }} و {{ Cssxref("margin-left") }} می باشد که برای جلوگیری از مقدار دهی به هر کدام از این خواص تعبیه شده است.

+ +

همچنین قابلیت مقداردهی با مقادیر منفی را نیز داراست.

+ +

روش استفاده

+ +
/* به هر چهار جهت این مقدار اعمال می گردد */
+margin: 1em;
+
+/*افقی (قسمت چپ و راست) | عمودی (قسمت بالا و پایین) */
+margin: 5% auto;
+
+/* پایین | افقی(چپ و راست) | بالا */
+margin: 1em auto 2em;
+
+/* چپ | پایین | راست | بالا */
+margin: 2px 1em 0 auto;
+
+margin: وارث;
+
+ +

مقادیر

+ +

یک، دو، سه و یا چهار عدد از مقادیر زیر را می پذیرد:

+ +
+
<length>
+
مقدار ثابتی را مشخص می کند. مقادیر منفی مورد قبول هستند. مقادیر قابل قبول را در {{cssxref("<length>")}} مشاهده کنید.
+
<percentage>
+
A {{cssxref("<percentage>")}} relative to the width of the containing block. Negative values are allowed.
+
auto
+
auto is replaced by some suitable value, e.g. it can be used for centering of blocks.
+ div { width:50%;  margin:0 auto; } centers the div container horizontally.
+
+ + + +

Formal syntax

+ +
{{csssyntax("margin")}}
+ +

Examples

+ +

Simple example

+ +

HTML

+ +
<div class="ex1">
+  margin:     auto;
+  background: gold;
+  width:      66%;
+</div>
+<div class="ex2">
+  margin:     20px 0 0 -20px;
+  background: gold;
+  width:      66%;
+</div>
+ +

CSS

+ +
.ex1 {
+  margin: auto;
+  background: gold;
+  width: 66%;
+}
+.ex2 {
+  margin: 20px 0px 0 -20px;
+  background: gold;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('Margin_Exemples') }}

+ +

Another example

+ +
margin: 5%;                /* all sides 5% margin */
+
+margin: 10px;              /* all sides 10px margin */
+
+margin: 1.6em 20px;        /* top and bottom 1.6em, left and right 20px margin */
+
+margin: 10px 3% 1em;       /* top 10px, left and right 3%, bottom 1em margin */
+
+margin: 10px 3px 30px 5px; /* top 10px, right 3px, bottom 30px, left 5px margin */
+
+margin: 1em auto;          /* 1em margin on top and bottom, box is horizontally centered */
+
+margin: auto;              /* box is horizontally centered, 0 margin on top and bottom */
+
+ +

Horizontal centering with margin: 0 auto;

+ +

To center something horizontally in modern browsers, use display: flex; justify-content: center; .

+ +

However, in older browsers like IE8-9, these are not available. In order to center an element inside its parent, use margin: 0 auto;

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}No significant change.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}Defines margin as animatable.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Removes its effect on inline elements.
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop("1") }}3.03.51.0 (85)
auto value1.0{{ CompatGeckoDesktop("1") }}6.0 (strict mode)3.51.0 (85)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile("1") }}6.06.01.0
+
+ +

See also

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