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

الهوامش الداخلية في لغة CSSCSS Padding

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

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

CSS Padding الهوامش الداخلية في لغة CSS

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




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

CSS padding top الهوامش الداخلية العلوية في لغة CSS

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


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

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

padding-top syntax

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

HTML 
padding-top:value;

padding-top values

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

HTML 
padding-top:length|percentage|initial|inherit;

CSS no padding

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

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

CSS padding top

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

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

CSS padding top percentage

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

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

CSS padding bottom الهوامش الداخلية السُفلية في لغة CSS

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


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

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

padding-bottom syntax

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

HTML 
padding-bottom:value;

padding-top values

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

HTML 
padding-bottom:length|percentage|initial|inherit;

CSS no padding

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

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

CSS padding bottom auto

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

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

CSS padding bottom

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

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

CSS padding bottom percentage

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

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

CSS padding left هامش داخلي يسار العنصر في لغة CSS

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


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

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

padding-left syntax

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

HTML 
padding-left:value;

padding-left values

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

HTML 
padding-left:length|percentage|initial|inherit;

CSS no padding

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

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

CSS padding left auto

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

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

CSS padding left

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

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

CSS padding left percentage

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

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

CSS padding right الهامش الداخلي الأيمن في لغة CSS

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


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

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

padding-right syntax

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

HTML 
padding-rightvalue;

padding-right values

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

HTML 
padding-right:length|percentage|initial|inherit;

CSS no padding

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

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

CSS padding right auto

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

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

CSS padding right

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

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

CSS padding right percentage

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

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

CSS padding Shorthand إختصار جميع الخصائص padding في لغة CSS

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


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

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left


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

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


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

  • length تحديد خاصية padding بوحدات px, pt, cm, etc.
  • percentage يتم تحديد بالنسبة المئوية.

padding syntax

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

HTML 
padding:value;

padding values

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

HTML 
padding:length|auto|initial|inherit;

CSS padding with three values

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

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

CSS padding with four values

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

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

CSS padding with two values

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

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

CSS padding with one value

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

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

مشاركة

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

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

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

المصطلحات19

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

0 / 19 مفهومةأول بطاقة، أول خطوة
01 Padding حشو
للمراجعة
02 Element عنصر
للمراجعة
03 Border حد
للمراجعة
04 Values قيم
للمراجعة
05 Content محتوي
للمراجعة
06 Properties خصائص
للمراجعة
07 Padding-Top حشو علوي
للمراجعة
08 Padding-Right حشو من اليمين
للمراجعة
09 Padding-Left حشو من اليسار
للمراجعة
10 Padding-Bottom حشو سفلي
للمراجعة
11 Length طول
للمراجعة
12 Parent الأبوين
للمراجعة
13 Shorthand إختصار
للمراجعة
14 Property خاصية
للمراجعة
15 Top أعلي
للمراجعة
16 Right يمين
للمراجعة
17 Bottom أسفل
للمراجعة
18 Left يسار
للمراجعة
19 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أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

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

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

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

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

02

ما الموضع الذي يتم تطبيق ال padding عليها عند استخدام خاصية padding-left ؟

03

ماهي الخاصية التي تستخدم في وضع padding في جميع الاتجاهات حول العنصر

____