الفرق بين المراجعتين لصفحة: «CSS/margin»
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| (4 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>margin</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>margin</code>}}</noinclude> | ||
الخاصية <code>margin</code> المختصرة في CSS تضبط الهوامش في الأطراف الأربعة للعنصر، ويمكن استخدام هذه الخاصية بدلًا من ضبط الهوامش فرادى باستخدام <code>[[CSS/margin-top|margin-top]]</code> و <code>[[CSS/margin-right|margin-right]]</code> و <code>[[CSS/margin-bottom|margin-bottom]]</code> و <code>[[CSS/margin-left|margin-left]]</code>. | الخاصية <code>margin</code> المختصرة في CSS تضبط الهوامش في الأطراف الأربعة للعنصر، ويمكن استخدام هذه الخاصية بدلًا من ضبط الهوامش فرادى باستخدام <code>[[CSS/margin-top|margin-top]]</code> و <code>[[CSS/margin-right|margin-right]]</code> و <code>[[CSS/margin-bottom|margin-bottom]]</code> و <code>[[CSS/margin-left|margin-left]]</code>. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 39: | سطر 24: | ||
|نسبة مئوية أو طول مطلق. | |نسبة مئوية أو طول مطلق. | ||
|} | |}<syntaxhighlight lang="css"> | ||
/* تطبيق الهوامش على الأطراف الأربعة */ | |||
margin: 1em; | |||
/* vertical | horizontal */ | |||
margin: 5% auto; | |||
/* top | horizontal | bottom */ | |||
margin: 1em auto 2em; | |||
/* top | right | bottom | left */ | |||
margin: 2px 1em 0 auto; | |||
/* القيم العامة */ | |||
margin: inherit; | |||
margin: initial; | |||
margin: unset; | |||
</syntaxhighlight> | |||
== أمثلة == | == أمثلة == | ||
| سطر 62: | سطر 64: | ||
margin: auto; | margin: auto; | ||
</syntaxhighlight>لاحظ أنَّ بالإمكان استخدام الهوامش لإزاحة أحد العناصر إلى خارج حدود العنصر الحاوي عليه:<syntaxhighlight lang="html"> | </syntaxhighlight>لاحظ أنَّ بالإمكان استخدام الهوامش لإزاحة أحد العناصر إلى خارج حدود العنصر الحاوي عليه:<syntaxhighlight lang="html"> | ||
<div class="outside"> | <div class="outside">يتم وضع هذا العنصر خارج الحاوية الخاصة به</div> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
| سطر 96: | سطر 98: | ||
* عند تحديد أربع قيم، فستُطبّق القيم على الطرف العلوي ثم الأيمن ثم السفلي ثم الأيسر على التوالي وبالترتيب (أي أنَّ الدوران يبدأ من الطرف العلوي ثم يستمر وفق اتجاه عقارب الساعة). | * عند تحديد أربع قيم، فستُطبّق القيم على الطرف العلوي ثم الأيمن ثم السفلي ثم الأيسر على التوالي وبالترتيب (أي أنَّ الدوران يبدأ من الطرف العلوي ثم يستمر وفق اتجاه عقارب الساعة). | ||
=== | === <code>auto</code> === | ||
سيختار المتصفح قيمة الهوامش المناسبة لكي يستخدمها، ويمكن في بعض الحالات استخدام هذه القيمة لتوسيط عنصر. | سيختار المتصفح قيمة الهوامش المناسبة لكي يستخدمها، ويمكن في بعض الحالات استخدام هذه القيمة لتوسيط عنصر. | ||
=== | === <code>[[CSS/length|<length>]]</code> === | ||
تحديد قيمة الهامش بالأطوال المطلقة. | تحديد قيمة الهامش بالأطوال المطلقة. | ||
=== | === <code>[[CSS/percentage|<percentage>]]</code> === | ||
تحديد قيمة الهامش كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي. | تحديد قيمة الهامش كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي. | ||
| سطر 118: | سطر 120: | ||
=== اندماج الهوامش === | === اندماج الهوامش === | ||
في بعض الأحيان تُدمَج الهوامش العلوية والسفلية لعنصرين في هامش واحد يساوي أكبر الهوامش. | في بعض الأحيان تُدمَج الهوامش العلوية والسفلية لعنصرين في هامش واحد يساوي أكبر الهوامش. | ||
== انظر أيضًا == | |||
* صفحة الخاصيات الفرعية التي تضبطها الخاصية margin وهي: <code>[[CSS/margin-top|margin-top]]</code>، و <code>[[CSS/margin-bottom|margin-bottom]]</code>، و <code>[[CSS/margin-right|margin-right]]</code>، و <code>[[CSS/margin-left|margin-left]]</code>. | |||
* صفحة الخاصية <code>[[CSS/padding|padding]]</code> التي تضبط الحاشية في الأطراف الأربعة للعنصر. | |||
* صفحة الخاصية <code>[[CSS/position|position]]</code> التي تصف كيف يجب أن يتموضع العنصر في المستند. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
المراجعة الحالية بتاريخ 19:08، 24 يوليو 2018
الخاصية margin المختصرة في CSS تضبط الهوامش في الأطراف الأربعة للعنصر، ويمكن استخدام هذه الخاصية بدلًا من ضبط الهوامش فرادى باستخدام margin-top و margin-right و margin-bottom و margin-left.
بطاقة الخاصية
| القيمة الابتدائية | لكل خاصية مختصرة:
|
|---|---|
| تُطبَّق على | جميع العناصر، ما عدا عناصر الجداول التي لا تساوي فيها قيمة الخاصية display إحدى الكلمات المحجوزة table-caption و table و inline-table.
|
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | نسبة مئوية أو طول مطلق. |
/* تطبيق الهوامش على الأطراف الأربعة */
margin: 1em;
/* vertical | horizontal */
margin: 5% auto;
/* top | horizontal | bottom */
margin: 1em auto 2em;
/* top | right | bottom | left */
margin: 2px 1em 0 auto;
/* القيم العامة */
margin: inherit;
margin: initial;
margin: unset;
أمثلة
لضبط الهوامش في الأطراف كلها إلى 5% من عرض العنصر الكتلي الحاوي للعنصر الهدف:
margin: 5%;
لضبط الهوامش في الأطراف كلها إلى 10px:
margin: 10px;
لضبط الهوامش في الطرفين العلوي والسفلي إلى 1.6em، والطرفين الأيسر والأيمن إلى 20px، فسنستخدم القاعدة:
margin: 1.6em 20px;
لضبط الهوامش في الطرف العلوي إلى 10px، والطرف السفلي إلى 1em، والطرفين الأيسر والأيمن إلى 3%، فسنستخدم القاعدة:
margin: 10px 3% 1em;
يمكن استخدام الخاصية margin لضبط قيم الخاصيات margin-top و margin-right و margin-bottom و margin-left كلها، فالقاعدة:
margin: 10px 3px 30px 5px;
تكافئ القواعد الآتية:
margin-top: 10px;
margin-right: 3px;
margin-bottom: 30px;
margin-left: 5px;
يمكن استخدام الكلمة المحجوزة auto مع الهوامش اليمنى واليسرى لتوسيط العنصر رأسيًا. لاحظ أنَّ القاعدة الآتية تضبط الهوامش العلوية والسفلية إلى 2em:
margin: 2em auto;
أما القاعدة الآتية فهي توسِّط العنصر أفقيًا، لكنها تجعل الهوامش العلوية والسفلية مساويةً للصفر:
margin: auto;
لاحظ أنَّ بالإمكان استخدام الهوامش لإزاحة أحد العناصر إلى خارج حدود العنصر الحاوي عليه:
<div class="outside">يتم وضع هذا العنصر خارج الحاوية الخاصة به</div>
شيفرة CSS:
.outside {
margin: 3rem 0 0 -3rem;
background-color: #069;
width: 66%;
color: white;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 3.0 | 3.5 | 1.0 |
البنية العامة
تقبل الخاصية margin قيمةً واحدةً أو قيمتين أو ثلاث أو أربع قيم، وكل قيمة يمكن أن تكون طولًا <length> أو نسبةً مئويةً <percentage> أو الكلمة المحجوزة auto، وكل قيمة يمكن أن تكون موجبة أو سالبة أو صفر.
- عند تحديد قيمة واحدة، فستُطبّق على جميع الأطراف.
- عند تحديد قيمتين، فأوّل قيمة ستُطبّق على الطرفين العلوي والسفلي، والقيمة الثانية على الطرفين الأيمن والأيسر.
- عند تحديد ثلاث قيم، فأوّل قيمة ستُطبّق على الطرف العلوي، والقيمة الثانية على الطرفين الأيمن والأيسر، والقيمة الثالثة على الطرف السفلي.
- عند تحديد أربع قيم، فستُطبّق القيم على الطرف العلوي ثم الأيمن ثم السفلي ثم الأيسر على التوالي وبالترتيب (أي أنَّ الدوران يبدأ من الطرف العلوي ثم يستمر وفق اتجاه عقارب الساعة).
auto
سيختار المتصفح قيمة الهوامش المناسبة لكي يستخدمها، ويمكن في بعض الحالات استخدام هذه القيمة لتوسيط عنصر.
<length>
تحديد قيمة الهامش بالأطوال المطلقة.
<percentage>
تحديد قيمة الهامش كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي.
البنية الرسمية
margin: [ <length> | <percentage> | auto ]{1,4};
ملاحظات
التوسيط الأفقي
يمكن توسيط أحد العناصر أفقيًا باستخدام القاعدتين display: flex; justify-content: center; .
لكن المتصفحات القديمة لا تدعم تخطيط flexbox، ولن تعمل القاعدتان السابقان، ولتوسيط العنصر ضمن العنصر الأب الذي يتبع له فاستخدم margin: 0 auto;.
اندماج الهوامش
في بعض الأحيان تُدمَج الهوامش العلوية والسفلية لعنصرين في هامش واحد يساوي أكبر الهوامش.
انظر أيضًا
- صفحة الخاصيات الفرعية التي تضبطها الخاصية margin وهي:
margin-top، وmargin-bottom، وmargin-right، وmargin-left. - صفحة الخاصية
paddingالتي تضبط الحاشية في الأطراف الأربعة للعنصر. - صفحة الخاصية
positionالتي تصف كيف يجب أن يتموضع العنصر في المستند.
مصادر ومواصفات
- مسودة CSS Basic Box Model.
- مسودة CSS Transitions.
- مواصفة CSS Level 2 (Revision 1).
- مواصفة CSS Level 1.