انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 45
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
6
الأمثلة
30
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
4,799
محتوى الدرس
في هذا الدرس 6تصفّح المواضيع

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

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




خصائص margin للأتجاهات الأربع في لغة CSS:
  • margin-top تصنع هامش أعلي العنصر.
  • margin-bottom تتصنع هامش أسفل العنصر.
  • margin-right تتصنع هامش يمين العنصر.
  • margin-left تصنع هامش أيسر العنصر.
الهوامش في لغة جافا سكربت

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

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


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

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

margin-top syntax

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

HTML 
margin-top:value;

margin-top values

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

HTML 
margin-top:length|auto|initial|inherit;

CSS no margin

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

HTML 
p
{
  border: 1px dotted black;
  background-color: yellow;
}
جرّب بنفسك

CSS margin top auto

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

HTML 
p
{
  border: 1px dotted black;
  margin-top: auto;
  background-color: yellow;
}
جرّب بنفسك

CSS margin top

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

HTML 
p
{
  border: 1px dotted black;
  margin-top: 100px;
  background-color: yellow;
}
جرّب بنفسك

CSS margin top percentage

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

HTML 
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.

HTML 
margin-bottom:value;

margin-top values

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

HTML 
margin-bottom:length|auto|initial|inherit;

CSS no margin

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

HTML 
p
{
  border: 1px dotted black;
  background-color: yellow;
}
جرّب بنفسك

CSS margin bottom auto

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

HTML 
.bottom
{
  border: 1px dotted black;
  margin-bottom: auto;
  background-color: yellow;
}
جرّب بنفسك

CSS margin bottom

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

HTML 
.bottom
{
  border: 1px dotted black;
  margin-bottom: 100px;
  background-color: yellow;
}
جرّب بنفسك

CSS margin bottom percentage

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

HTML 
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.

HTML 
margin-left:value;

margin-left values

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

HTML 
margin-left:length|auto|initial|inherit;

CSS no margin

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

HTML 
p
{
  border: 1px dotted black;
  background-color: yellow;
}
جرّب بنفسك

CSS margin left auto

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

HTML 
p
{
  border: 1px dotted black;
  margin-left: auto;
  background-color: yellow;
}
جرّب بنفسك

CSS margin left

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

HTML 
p
{
  border: 1px dotted black;
  margin-left: 100px;
  background-color: yellow;
}
جرّب بنفسك

CSS margin left percentage

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

HTML 
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.

HTML 
margin-rightvalue;

margin-right values

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

HTML 
margin-right:length|auto|initial|inherit;

CSS no margin

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

HTML 
p
{
  border: 1px dotted black;
  background-color: yellow;
}
جرّب بنفسك

CSS margin right auto

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

HTML 
p
{
  border: 1px dotted black;
  margin-right: auto;
  background-color: yellow;
}
جرّب بنفسك

CSS margin right

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

HTML 
p
{
  border: 1px dotted black;
  margin-right: 100px;
  background-color: yellow;
}
جرّب بنفسك

CSS margin right percentage

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

HTML 
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.

HTML 
margin:value;

margin values

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

HTML 
margin:length|auto|initial|inherit;

CSS margin with three values

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

HTML 
p 
{
  margin: 25px 50px 75px;
  border:red solid 1px;
  background:yellow;
}
جرّب بنفسك

CSS margin with four values

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

HTML 
p 
{
  margin: 25px 50px 75px 100px;
  border:red solid 1px;
  background:yellow;
}
جرّب بنفسك

CSS margin with two values

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

HTML 
p 
{
  margin: 25px 50px;
  border:red solid 1px;
  background:yellow;
}
جرّب بنفسك

CSS margin with one value

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

HTML 
p 
{
  margin: 25px;
  border:red solid 1px;
  background:yellow;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات21

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 21 مفهومةأول بطاقة، أول خطوة
01 Margin هامش
للمراجعة
02 Elements عناصر
للمراجعة
03 Border حد
للمراجعة
04 Element عنصر
للمراجعة
05 Properties خصائص
للمراجعة
06 Margin-Top هامش علوي
للمراجعة
07 Margin-Right هامش من اليمين
للمراجعة
08 Margin-Left هامش من اليسار
للمراجعة
09 Margin-Bottom هامش سفلي
للمراجعة
10 Values قيم
للمراجعة
11 Auto آلي
للمراجعة
12 Length طول
للمراجعة
13 Inherit متوارث
للمراجعة
14 Parent الأبوين
للمراجعة
15 Shorthand إختصار
للمراجعة
16 Property خاصية
للمراجعة
17 Top أعلي
للمراجعة
18 Right يمين
للمراجعة
19 Bottom أسفل
للمراجعة
20 Left يسار
للمراجعة
21 Value قيمة
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات2

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 2 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة
02 HTML HTML
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

3أسئلة 1أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي3 أسئلة تنتظرك
01

في ماذا يتم استخدام ال margin ؟

02

ما هو الاتجاه الذي يتم تطبيق ال margin عليه في حالة قمت باستخدام قيمة واحده ؟

03

ما هو الاتجاه الذي سوف يطبق عليه في حالة استخدام خاصية margin-top ؟