CSS Margin
الهوامش في لغة جافا سكربت
ستتعلم في هذا الدرس التحكم إضافة هوامش حول عناصر HTML عن طريق خاصية margin في لغة CSS ويمكن أيضاً التحكم في حجم هذة الهوامش ويمكن التحكم في جانب واحد أو أكثر.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Margin
الهوامش في لغة جافا سكربت
</>
CSS Margin
الهوامش في لغة جافا سكربت
- 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.
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;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم هندسة البرمجيات. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال هندسة البرمجيات. مهمتنا ليست فقط تعليم هندسة البرمجيات، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
الدورات
لا يوجد
