CSS

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

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

التاريخ

12 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1895

المواضيع

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

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

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

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


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

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

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


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

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

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

padding-top:value;
padding-top values

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

padding-top:length|percentage|initial|inherit;
CSS no padding

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

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

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

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

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

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.

padding-bottom:value;
padding-top values

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

padding-bottom:length|percentage|initial|inherit;
CSS no padding

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

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

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

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

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

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

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

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.

padding-left:value;
padding-left values

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

padding-left:length|percentage|initial|inherit;
CSS no padding

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

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

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

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

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

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

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

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.

padding-rightvalue;
padding-right values

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

padding-right:length|percentage|initial|inherit;
CSS no padding

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

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

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

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

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

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

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

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.

padding:value;
padding values

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

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

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

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

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

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

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

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

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

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

عنصر

Values
Values

قيم

Content
Content

محتوي

Properties
Properties

خصائص

Padding-Top
Padding-Top

حشو علوي

Padding-Right
Padding-Right

حشو من اليمين

Padding-Left
Padding-Left

حشو من اليسار

Padding-Bottom
Padding-Bottom

حشو سفلي

Length
Length

طول

Length
Length

متوارث

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
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.