More

[ دورة CSS ] الصندوق النموذجي CSS – الدرس الخامس – الهوامش الداخلية Padding

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


تعمل الهوامش الداخلية على تحديد المسافة حول العنصر (داخل الحدود) . تتأثر الهوامش الداخلية بلون خلفية العنصر
يمكن تغيير هوامش اليسار واليمين والأعلى والأسفل الخارجية وفقاً لخاصيات معينة كما يمكن اتسخدام اختصار او تقليص القيم لضبط الهوامش سوياً

القيم الممكنة

القيمة الوصف
length يمكن تخصيص الهوامش الداخلية من خلال وحدات القياس px و pt و cm الخ ولكن القيمة الافتراضية للهوامش هي 0px
% % تخصص عرض الهوامش الداخلية للعنصر من خلال النسبة المئوية %

استخدام الهوامش بشكل مستقل

يمكن التعدديل على كل جانب من جوانب الهوامش الداخلية على حدة
مثال

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

خاصية اختصار الهوامش الداخلية

من الممكن اختصار وجمع جميع قيم الهوامش الداخلية في خاصية واحدة هي padding
مثال

padding:100px 50px;

يمكن التحديد على خاصية الهوامش الخارجية من 1 الى 4 قيم مختلفة

  • padding:25px 50px 75px 100px;
  1. الهوامش الداخلية العليا هي 25px
  2. الهوامش الداخلية اليمنى هي 50px
  3. الهوامش الداخلية السفلى هي 75px
  4. الهوامش الداخلية اليسرى هي 100px
  • padding:25px 50px 75px;
  1. الهوامش الداخلية العليا هي 25px
  2. الهوامش الداخلية اليمنى و اليسرى هي 50px
  3. الهوامش الداخلية السفلى هي 75px
  • padding:25px 50px;
  1. الهوامش الداخلية العليا و السفلى هي 25px
  2. الهوامش الداخلية اليمنى و اليسرى هي 50px
  • padding:25px
  1. جميع الهوامش الداخلية للاتجاهات الأربعة هي 25px

جميع خصائص الهوامش الداخلية padding
الخاصية الشرح
padding خاصية مختصرة قصيرة حيث يمكن تحديد جميع قيم الهوامش الداخلية في خاصية واحدة
padding-bottom ضبط الهوامش الداخلية السفلية للعنصر
padding-left ضبط الهوامش الداخلية اليسارية للعنصر
padding-right ضبط الهوامش الداخلية اليمينية للعنصر
padding-top ضبط الهوامش الداخلية العلوية للعنصر

READ  باتش النخبة العربية الإصدار الأول Arab Elite Patch V1 + FIX PES 2015
Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker
Inline
Inline