نموذج الصندوق: الهوامش CSS

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

يحدد خاصية padding في CSS المساحة بين حافة العنصر والنص أو الصور الداخلية. لا تقبل خاصية padding القيم السلبية.

خصائص التدرج لـ CSS

يحدد خاصية padding في CSS مساحة الفجوة بين حافة العنصر والنص أو الصور الداخلية. تقبل خاصية padding قيم طول أو نسبة المئة وليس القيم السلبية.

على سبيل المثال، إذا كنت ترغب في أن يكون لديك جميع عناصر h1 حواف داخلية من 10 بكسل في جميع الجوانب، يمكنك القيام بذلك فقط:

h1 {padding: 10px;}

يمكنك أيضًا تعيين الحواف الداخلية للجوانب العلوية واليمنى والسفلية واليسرى بشكل منفرد وفقًا للترتيب العلوية واليمنى والسفلية واليسرى، ويمكن استخدام وحدات مختلفة أو قيم النسبة المئوية للجوانب المختلفة:

h1 {padding: 10px 0.25em 2ex 20%;}

خصائص الحواف الداخلية الفردية

يمكن أيضًا تعيين الحواف الداخلية العلوية واليمنى والسفلية واليسرى باستخدام الخاصيات الأربعة التالية بشكل منفرد:

ربما فكرت في ذلك، القاعدة التالية تحقق نفس التأثير كالقاعدة المختصرة السابقة:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

قيم النسبة المئوية للحواف الداخلية

كما ذكرنا من قبل، يمكن تعيين قيم النسبة المئوية للحواف الداخلية. القيم المئوية تُحسب بناءً على عرض العنصر الأم، مثل الهوامش، لذا إذا تغير عرض العنصر الأم، فإنها ستتغير أيضًا.

القاعدة التالية تعين حواف الداخلية للفقرة بناءً على عرض العنصر الأم 10%:

p {padding: 10%;}

على سبيل المثال: إذا كان عنصر الأب هو عنصر div، فإن الحواف الداخلية يجب أن تُحسب بناءً على عرض div.

<div style="width: 200px;">
<p>هذا الفقرة يحتوي داخل DIV له عرض 200 بكسل.</p>
</div>

ملاحظة:الحواف الداخلية العلوية والسفلية متساوية مع الحواف الداخلية اليسرى واليمنى؛ أي أن نسبة الحواف الداخلية العلوية والسفلية ستكون نسبة عرض العنصر الأم، وليس طولها.

مثال على استخدام الحواف الداخلية في CSS:

جميع خصائص الحواف الداخلية في بيان واحد
هذا المثال يوضح كيفية استخدام خصائص مختصرة لضبط جميع خصائص الحواف الداخلية في بيان واحد، يمكن أن يكون هناك من واحد إلى أربعة قيم.
تعيين الحافة الداخلية السفلية 1
هذا المثال يوضح كيفية استخدام وحدة السنتيمتر لتعيين الحافة الداخلية السفلية للخلية.
تعيين الحافة الداخلية السفلية 2
هذا المثال يوضح كيفية استخدام نسبة المئة لتعيين الحافة الداخلية السفلية للخلية.
تعيين الحافة الداخلية اليسرى 1
هذا المثال يوضح كيفية استخدام وحدة السنتيمتر لتعيين الحافة الداخلية اليسرى للخلية.
تعيين الحافة الداخلية اليسرى 2
هذا المثال يوضح كيفية استخدام نسبة المئة لتعيين الحافة الداخلية اليسرى للخلية.
إعداد السماح الأيمن 1
هذا المثال يوضح كيفية استخدام الوحدة المليمترية لتعيين السماح الأيمن للخلية.
إعداد السماح الأيمن 2
هذا المثال يوضح كيفية استخدام النسبة المئوية لتعيين السماح الأيمن للخلية.
إعداد السماح السفلي 1
هذا المثال يوضح كيفية استخدام الوحدة المليمترية لتعيين السماح السفلي للخلية.
إعداد السماح السفلي 2
هذا المثال يوضح كيفية استخدام النسبة المئوية لتعيين السماح السفلي للخلية.

خصائص السماح لـ CSS

خصائص وصف
padding خصائص التدرج. تستخدم لتعيين خصائص السماح للعنصر في بيان واحد.
padding-bottom إعداد السماح العلوي للعنصر.
padding-left إعداد السماح الأيسر للعنصر.
padding-right إعداد السماح الأيمن للعنصر.
padding-top إعداد السماح السفلي للعنصر.