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