HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

دروس CSS

الصفحة الرئيسية لـ CSS مقدمة CSS بنية CSS محددات CSS كيفية استخدام CSS تعليقات CSS ألوان CSS
الألوان RGB عرافة HSL
خلفيات CSS
لون الخلفية الصورة الخلفية تكرار الخلفية مرفق الخلفية اختزال الخلفية
حدود CSS
الحدود عرض الحدود لون الحدود جوانب الحدود اختزال الحدود حدود مدورة
هوامش CSS
الهوامش Margin Collapse
حشوة CSS ارتفاع / عرض CSS نموذج مربع CSS مخطط CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
نص CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
خطوط CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
أيقونات CSS روابط CSS قوائم CSS جداول CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
عرض CSS أقصى عرض لـ CSS موقف CSS CSS Z- الفهرس تجاوز CSS تعويم CSS
Float Clear Float Examples
كتلة مضمنة CSS محاذاة CSS موحد CSS فئة CSS الزائفة عنصر زائف لـ CSS تعتيم CSS شريط التنقل CSS
Navbar Vertical Navbar Horizontal Navbar
القوائم المنسدلة CSS معرض صور CSS صور CSS العفاريت محددات CSS Attr نماذج CSS عدادات CSS تخطيط موقع الويب CSS وحدات CSS خصوصية CSS CSS! مهم وظائف الرياضيات CSS

CSS متقدم

زوايا مستديرة CSS صور الحدود CSS خلفيات CSS ألوان CSS الكلمات الأساسية الملونة CSS تدرجات CSS
Linear Gradients Radial Gradients Conic Gradients
ظلال CSS
Shadow Effects Box Shadow
تأثيرات نص CSS خطوط الويب CSS تحويلات CSS 2D تحويلات CSS ثلاثية الأبعاد انتقالات CSS الرسوم المتحركة CSS تلميحات CSS صور نمط CSS انعكاس صورة CSS كائن CSS مناسب موضع كائن CSS اخفاء CSS أزرار CSS ترقيم صفحات CSS أعمدة CSS المتعددة واجهة مستخدم CSS متغيرات CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
تحجيم صندوق CSS استعلامات وسائط CSS أمثلة على CSS MQ فليكس بوكس ​​CSS
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

استجابة CSS

مقدمة RWD منفذ عرض RWD عرض شبكة RWD استعلامات وسائط RWD صور RWD مقاطع فيديو RWD أطر RWD قوالب RWD

شبكة CSS

مقدمة الشبكة حاوية الشبكة عنصر الشبكة

CSS SASS

دروس SASS

أمثلة CSS

قوالب CSS أمثلة CSS اختبار المغلق تمارين CSS شهادة CSS

مراجع CSS

مرجع CSS محددات CSS وظائف CSS CSS المرجعي Aural الخطوط الآمنة للويب CSS متحرك CSS وحدات CSS محول CSS PX-EM ألوان CSS قيم ألوان CSS القيم الافتراضية لـ CSS دعم مستعرض CSS

حشوة CSS

❮ سابق التالي ❯

تُستخدم الحشوة لإنشاء مساحة حول محتوى العنصر ، داخل أي حدود محددة.

مساحة هذا العنصر 70 بكسل.

حشوة CSS

تُستخدم خصائص CSS paddingلإنشاء مساحة حول محتوى العنصر ، داخل أي حدود محددة.

باستخدام CSS ، يمكنك التحكم الكامل في المساحة المتروكة. هناك خصائص لتعيين المساحة المتروكة لكل جانب من عنصر (أعلى ، يمين ، أسفل ، يسار).

الحشو - جوانب فردية

يحتوي CSS على خصائص لتحديد المساحة المتروكة لكل جانب من عنصر:

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

يمكن أن تحتوي جميع خصائص المساحة المتروكة على القيم التالية:

  • الطول - يحدد المساحة المتروكة بوحدات px ، و pt ، و cm ، وما إلى ذلك.
  • ٪ - يحدد المساحة المتروكة بنسبة٪ من عرض العنصر المحتوي
  • وراثة - تحدد أن الحشو يجب أن يورث من العنصر الأصل

ملاحظة: القيم السلبية غير مسموح بها.

مثال

تعيين حشوة مختلفة لجميع الجوانب الأربعة لعنصر <div>:  

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

الحشو - خاصية الاختزال

لتقصير الكود ، من الممكن تحديد جميع خصائص الحشو في خاصية واحدة.

الخاصية هي paddingخاصية مختصرة لخصائص الحشو الفردية التالية:

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

حتى هنا هو كيف يعمل:

إذا كانت paddingالخاصية تحتوي على أربع قيم:

  • الحشو: 25 بكسل 50 بكسل 75 بكسل 100 بكسل ؛
    • المساحة المتروكة أعلى 25 بكسل
    • المساحة المتروكة اليمنى هي 50 بكسل
    • حجم المساحة المتروكة 75 بكسل
    • المساحة المتروكة لليسار 100 بكسل

مثال

استخدم خاصية اختزال الحشو مع أربع قيم:

div {
  padding: 25px 50px 75px 100px;
}

إذا كانت paddingالخاصية تحتوي على ثلاث قيم:

  • الحشو: 25 بكسل 50 بكسل 75 بكسل ؛
    • المساحة المتروكة أعلى 25 بكسل
    • حشوة اليمين واليسار 50 بكسل
    • حجم المساحة المتروكة 75 بكسل

مثال

استخدم خاصية اختزال الحشو بثلاث قيم: 

div {
  padding: 25px 50px 75px;
}

إذا كانت paddingالخاصية تحتوي على قيمتين:

  • الحشو: 25 بكسل 50 بكسل ؛
    • الحشوة العلوية والسفلية 25 بكسل
    • حشوة اليمين واليسار 50 بكسل

مثال

استخدم خاصية اختزال الحشو بقيمتين: 

div {
  padding: 25px 50px;
}

إذا كان paddingللعقار قيمة واحدة:

  • الحشو: 25 بكسل ؛
    • جميع الحشوات الأربعة 25 بكسل

مثال

استخدم خاصية اختزال الحشو بقيمة واحدة: 

div {
  padding: 25px;
}

عرض الحشو والعنصر

widthتحدد خاصية CSS عرض منطقة محتوى العنصر. منطقة المحتوى هي الجزء الموجود داخل الحشو والحد والهامش لعنصر ( نموذج الصندوق ).

لذلك ، إذا كان للعنصر عرض محدد ، فستتم إضافة المساحة المتروكة لهذا العنصر إلى العرض الإجمالي للعنصر. هذه غالبًا نتيجة غير مرغوب فيها.

مثال

هنا ، يتم إعطاء عرض عنصر <div> 300 بكسل. ومع ذلك ، سيكون العرض الفعلي للعنصر <div> 350 بكسل (300 بكسل + 25 بكسل من المساحة المتروكة اليسرى + 25 بكسل من المساحة المتروكة اليمنى):

div {
  width: 300px;
  padding: 25px;
}

للحفاظ على العرض عند 300 بكسل ، بغض النظر عن مقدار المساحة المتروكة ، يمكنك استخدام box-sizingالخاصية. هذا يجعل العنصر يحافظ على عرضه الفعلي ؛ إذا قمت بزيادة المساحة المتروكة ، ستقل مساحة المحتوى المتوفرة.

مثال

استخدم خاصية box-sizing للحفاظ على العرض عند 300 بكسل ، بغض النظر عن مقدار المساحة المتروكة:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

مزيد من الأمثلة


يوضح هذا المثال كيفية تعيين المساحة المتروكة اليسرى للعنصر <p>.


يوضح هذا المثال كيفية تعيين المساحة المتروكة الصحيحة للعنصر <p>.


يوضح هذا المثال كيفية تعيين المساحة المتروكة العلوية لعنصر <p>.


يوضح هذا المثال كيفية تعيين المساحة المتروكة السفلية لعنصر <p>.

اختبر نفسك مع التمارين

ممارسه الرياضه:

اضبط المساحة المتروكة العلوية لعنصر <h1> على 30 بكسل.

<style>
h1 {
  : 30px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

جميع خصائص الحشو في CSS

Property Description
padding A shorthand property for setting all the padding properties in one declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element

❮ سابق التالي ❯