المسافات الداخلية (Padding)

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 34 من 76.

في CSS، تُعد الـ padding هي المساحة الفاصلة بين محتوى العنصر وإطاره (border). يُستخدم الـ Padding لإنشاء مساحة بصرية حول المحتوى، مما يجعله أكثر وضوحاً وجاذبية. يمكنك التحكم في الـ padding في جميع الاتجاهات الأربعة للعنصر (الأعلى، واليمين، والأسفل، واليسار) بشكل مستقل أو باستخدام التدوين المختصر (shorthand notation).

إليك الصيغة الأساسية لاستخدام خاصية padding:

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

padding-top: الحشوة في الجانب العلوي من العنصر.
padding-right: الحشوة في الجانب الأيمن من العنصر.
padding-bottom: الحشوة في الجانب السفلي من العنصر.

padding-left: المسافة البادئة على الجانب الأيسر للعنصر.
value: قيمة المسافة البادئة المطلوبة، والتي يمكن تحديدها بالبكسل (px)، أو ems (em)، أو النسب المئوية (%)، أو وحدات CSS صالحة أخرى.

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

p {
    padding: 20px; /* يطبق نفس الحشوة على جميع الجوانب الأربعة */
}

div {
    padding: 10px 25px; /* يضبط الحشوة العلوية والسفلية على 10 بكسل، والحشوة اليسرى واليمنى على 25 بكسل */
}

.button {
    padding: 15px 30px 10px 5px; /* يضبط الحشوة لكل جانب بشكل فردي */
}

في هذا المثال، تمتلك جميع عناصر <p> (الفقرة) حشوة (padding) بمقدار 20px من جميع الجوانب، وتمتلك جميع عناصر <div> حشوة علوية وسفلية بمقدار 10px وحشوة يمنى ويسرى بمقدار 25px، وجميع العناصر التي تحمل الفئة button تمتلك حشوة علوية بمقدار 15px، وحشوة يمنى بمقدار 30px، وحشوة سفلية بمقدار 10px، وحشوة يسرى بمقدار 5px.

التحدي

سهل

لقد تم تزويدك بمستند HTML يحتوي على عنوانين. مهمتك هي استخدام خاصية padding لإضافة مساحة حول محتوى هذه العناصر. اتبع الخطوات أدناه:

اكتب قاعدة CSS تستهدف عنصر <h1>. قم بتعيين padding إلى 20px من جميع الجوانب.
اكتب قاعدة CSS تستهدف عنصر <h2>. قم بتعيين padding العلوي والسفلي إلى 10px والـ padding الأيسر والأيمن إلى 30px.

ورقة مرجعية

تنشئ خاصية padding في CSS مساحة بين محتوى العنصر وحدوده.

خصائص padding الفردية:

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

طريقة الكتابة المختصرة:

/* نفس الحاشية من جميع الجوانب */
padding: 20px;

/* الأعلى/الأسفل: 10px، اليمين/اليسار: 25px */
padding: 10px 25px;

/* الأعلى، اليمين، الأسفل، اليسار بشكل فردي */
padding: 15px 30px 10px 5px;

يمكن تحديد القيم بالبكسل (px)، أو ems (em)، أو النسب المئوية (%)، أو وحدات CSS صالحة أخرى.

جرّب بنفسك

<html>
<head>
    <title>Padding</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">The Box Model</h1>
    <h2 style="border:2px solid black;">It helps in controlling spacing and layout in web design! </h2>
</body>
</html>