CSS

CSS Margin
الهوامش في لغة جافا سكربت

ستتعلم في هذا الدرس التحكم إضافة هوامش حول عناصر HTML عن طريق خاصية margin في لغة CSS ويمكن أيضاً التحكم في حجم هذة الهوامش ويمكن التحكم في جانب واحد أو أكثر.

التاريخ

12 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2088

المواضيع

24
الشروحات chevron_left CSS Margin chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Margin
الهوامش في لغة جافا سكربت

</> CSS Margin
الهوامش في لغة جافا سكربت

تًستخدم خاصية margin بأنشاء مساحات (هوامش - هامش ) حول عناصر HTML من الخارج بين العناصر وبعضها لبعض ولكن هذه المسافات تكون مُهدرة لا يمكنك الإستفادة من هذه المساحات.
ويتحكم margin في عرض العنصر على المتصفح بجوار جميع العناصر الأخرى في صفحة الويب.


خصائص margin للأتجاهات الأربع في لغة CSS:
  • margin-top تصنع هامش أعلي العنصر.
  • margin-bottom تتصنع هامش أسفل العنصر.
  • margin-right تتصنع هامش يمين العنصر.
  • margin-left تصنع هامش أيسر العنصر.
مهم
المساحات البيضاء خارج العنصر وخارج Border الأحمر هي عبارة عن هوامش تمت إضافتها عن طريق خاصية margin في لغة CSS.

</> CSS margin top
الهوامش العلوية في لغة CSS

تًستخدم خاصية margin-top لعمل هامش أعلي العنصر في لغة CSS وقيمة الهامش العلوي في الوضع الأفتراضي هي صفر أي انه بدون هامش.


قيم خاصية margin-top في لغة CSS:

  • auto المتصفح يقوم بحساب الهوامش تلقائي بناء علي وضعية العنصر علي المتصفح.
  • length تحديد الهامش العلوي بالوحدات ثابتة px,pt,cm.
  • percentage يتم تحديد الهامش العلوي بناء علي حجم عرض محتوي العنصر %.
margin-top syntax

طريقة كتابة خاصية margin-top في لغة CSS.

margin-top:value;
margin-top values

قيم خاصية margin-top في لغة CSS.

margin-top:length|auto|initial|inherit;
CSS no margin

عرض العنصر بدون هوامش CSS.

p
{
  border: 1px dotted black;
  background-color: yellow;
}
CSS margin top auto

ضبط مساحة margin top بالنسبة تلقائي بقيمة auto في لغة CSS.

p
{
  border: 1px dotted black;
  margin-top: auto;
  background-color: yellow;
}
CSS margin top

المسافة بين عنصر h1 وعنصر p هي مسافة margin top وهي 100 px.

p
{
  border: 1px dotted black;
  margin-top: 100px;
  background-color: yellow;
}
CSS margin top percentage

ضبط مساحة margin top بالنسبة المئوية في لغة CSS.

p
{
  border: 1px dotted black;
  margin-top: 10%;
  background-color: yellow;
}

</> CSS margin bottom
الهوامش السُفلية في لغة CSS

تًستخدم خاصية margin-bottom لعمل هامش أسفل العنصر في لغة CSS وقيمة الهامش السفلي في الوضع الأفتراضي هي صفر أي انه بدون هامش.


قيم خاصية margin-bottom في لغة CSS:

  • auto المتصفح يقوم بحساب الهوامش تلقائي بناء علي وضعية العنصر علي المتصفح.
  • length تحديد الهامش السُفلي بالوحدات ثابتة px,pt,cm.
  • percentage يتم تحديد الهامش السُفلي بناء علي حجم عرض محتوي العنصر %.
margin-bottom syntax

طريقة كتابة خاصية margin-bottom في لغة CSS.

margin-bottom:value;
margin-top values

قيم خاصية margin-top في لغة CSS.

margin-bottom:length|auto|initial|inherit;
CSS no margin

عرض العنصر بدون هوامش CSS.

p
{
  border: 1px dotted black;
  background-color: yellow;
}
CSS margin bottom auto

ضبط مساحة margin bottom بالنسبة تلقائي بقيمة auto في لغة CSS.

.bottom
{
  border: 1px dotted black;
  margin-bottom: auto;
  background-color: yellow;
}
CSS margin bottom

المسافة بين عنصر p وعنصر p هي مسافة margin bottom وهي 100 px للعنصر الأول.

.bottom
{
  border: 1px dotted black;
  margin-bottom: 100px;
  background-color: yellow;
}
CSS margin bottom percentage

ضبط مساحة margin bottom بالنسبة المئوية في لغة CSS.

p
{
  border: 1px dotted black;
  margin-bottom: 10%;
  background-color: yellow;
}

</> CSS margin left
هامش اليسار في لغة CSS

تًستخدم خاصية margin-left لعمل هامش أيسر العنصر في لغة CSS وقيمة الهامش اليسار في الوضع الأفتراضي هي صفر أي انه بدون هامش.


قيم خاصية margin-left في لغة CSS:

  • auto المتصفح يقوم بحساب الهوامش تلقائي بناء علي وضعية العنصر علي المتصفح.
  • length تحديد الهامش اليسار بالوحدات ثابتة px,pt,cm.
  • percentage يتم تحديد الهامش اليسار بناء علي حجم عرض محتوي العنصر %.
margin-left syntax

طريقة كتابة خاصية margin-top في لغة CSS.

margin-left:value;
margin-left values

قيم خاصية margin-left في لغة CSS.

margin-left:length|auto|initial|inherit;
CSS no margin

عرض العنصر بدون هوامش CSS.

p
{
  border: 1px dotted black;
  background-color: yellow;
}
CSS margin left auto

ضبط مساحة margin left بالنسبة تلقائي بقيمة auto في لغة CSS.

p
{
  border: 1px dotted black;
  margin-left: auto;
  background-color: yellow;
}
CSS margin left

المسافة بين اليسار وبين النص p هي مسافة margin left وهي 100 px.

p
{
  border: 1px dotted black;
  margin-left: 100px;
  background-color: yellow;
}
CSS margin left percentage

ضبط مساحة margin left بالنسبة المئوية في لغة CSS.

p
{
  border: 1px dotted black;
  margin-left: 10%;
  background-color: yellow;
}

</> CSS margin right
الهامش الأيمن في لغة CSS

تًستخدم خاصية margin-right لعمل هامش أيمن العنصر في لغة CSS وقيمة الهامش الأيمن في الوضع الأفتراضي هي صفر أي انه بدون هامش.


قيم خاصية margin-right في لغة CSS:

  • auto المتصفح يقوم بحساب الهوامش تلقائي بناء علي وضعية العنصر علي المتصفح.
  • length تحديد الهامش الأيمن بالوحدات ثابتة px,pt,cm.
  • percentage يتم تحديد الهامش الأيمن بناء علي حجم عرض محتوي العنصر %.
margin-right syntax

طريقة كتابة خاصية margin-right في لغة CSS.

margin-rightvalue;
margin-right values

قيم خاصية margin-right في لغة CSS.

margin-right:length|auto|initial|inherit;
CSS no margin

عرض العنصر بدون هوامش CSS.

p
{
  border: 1px dotted black;
  background-color: yellow;
}
CSS margin right auto

ضبط مساحة margin right بالنسبة تلقائي بقيمة auto في لغة CSS.

p
{
  border: 1px dotted black;
  margin-right: auto;
  background-color: yellow;
}
CSS margin right

المسافة بين اليمين وبين النص p هي مسافة margin right وهي 100 px.

p
{
  border: 1px dotted black;
  margin-right: 100px;
  background-color: yellow;
}
CSS margin right percentage

ضبط مساحة margin right بالنسبة المئوية في لغة CSS.

p
{
  border: 1px dotted black;
  margin-right: 10%;
  background-color: yellow;
}

</> CSS Margin Shorthand
إختصار جميع الخصائص margin في لغة CSS

  • يمكنك اختصار جميع  خصائص margin [margin-top,margin-bottom,margin-right,margin-left] في لغة CSS في خاصية واحده فقط وهي margin.


الخصائص التي تمت إختصارتها:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left


قيم خاصية margin للأتجاهات الأربع في لغة CSS:

  • قيمة واحدة وهي تعني قيمة متساوية على الاربع اللإتجاهات top + right +bottom + left.
  • قيميتين أول قيمة بالتساوي قيمة إتجاهين left + right وثاني قيمة تؤثر علي إتجاهين top + bottom.
  • أربع قيم وهي  تتحكم في كل قيمة لكل إتجاه top + right +bottom + left الترتيب مع عقارب الساعة ( 12 = top).
  • ثلاث قيم تتحكم في إتجاه Top +( left + Right) + Bottom الترتيب مع عقارب الساعة.


القيم التي تًكتب داخل خاصية margin في لغة CSS:

  • length تحديد خاصية margin بوحدات px, pt, cm, etc.
  • auto  يتم تحديد المساحة بواسطة المتصفح تلقائياً.
  • percentage يتم تحديد بالنسبة المئوية.
marginsyntax

طريقة كتابة خاصية margin في لغة CSS.

margin:value;
margin values

قيم خاصية margin في لغة CSS.

margin:length|auto|initial|inherit;
CSS margin with three values

خاصية margin مع ثلاث قيم في لغة CSS.

p 
{
  margin: 25px 50px 75px;
  border:red solid 1px;
  background:yellow;
}
CSS margin with four values

خاصية margin مع أربع قيم في لغة CSS.

p 
{
  margin: 25px 50px 75px 100px;
  border:red solid 1px;
  background:yellow;
}
CSS margin with two values

خاصية margin مع قيميتين في لغة CSS.

p 
{
  margin: 25px 50px;
  border:red solid 1px;
  background:yellow;
}
CSS margin with one value

خاصية margin مع قيمة واحدة في لغة CSS.

p 
{
  margin: 25px;
  border:red solid 1px;
  background:yellow;
}
مصطلحات الدرس
Margin
Margin

هامش

Elements
Elements

عناصر

Element
Element

عنصر

Properties
Properties

خصائص

Margin-Top
Margin-Top

هامش علوي

Margin-Right
Margin-Right

هامش من اليمين

Margin-Left
Margin-Left

هامش من اليسار

Margin-Bottom
Margin-Bottom

هامش سفلي

Values
Values

قيم

Auto
Auto

آلي

Length
Length

طول

Inherit
Inherit

متوارث

Parent
Parent

الأبوين

Shorthand
Shorthand

إختصار

Property
Property

خاصية

Top
Top

أعلي

Right
Right

يمين

Bottom
Bottom

أسفل

Left
Left

يسار

Value
Value

قيمة

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات