More

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

What do you think of this post?
  • Bad ()
  • Boring ()
  • Useful ()
  • Interesting ()
  • Awesome ()

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

تعمل الهوامش الداخلية على تحديد المسافة حول العنصر (داخل الحدود) . تتأثر الهوامش الداخلية بلون خلفية العنصر

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

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

القيمة الوصف
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 ضبط الهوامش الداخلية العلوية للعنصر
You may also like  [ دورة CSS ] الدروس المتقدمة CSS - الدرس الرابع - الطفو Float
What do you think of this post?
  • Bad ()
  • Boring ()
  • Useful ()
  • Interesting ()
  • Awesome ()


You can also use Facebook to comment

Tags
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