وثائق CSS قابلة للتشغيل: padding في CSS

Q: ما ترتيب القيم في اختصار padding؟

باتجاه عقارب الساعة بدءًا من الأعلى: padding: top right bottom left;. مع ثلاث قيم: الأعلى، ثم اليسار واليمين، ثم الأسفل؛ ومع قيمتين: الأعلى والأسفل ثم اليسار واليمين؛ ومع قيمة واحدة: الجوانب الأربعة.

Q: هل يزيد padding حجم العنصر؟

مع القيمة الافتراضية box-sizing: content-box نعم: يُضاف الحشو إلى width وheight. ومع box-sizing: border-box يُقتطع الحشو من داخل العرض، فيحتفظ العنصر بالحجم الذي ضبطته.

Q: نسبة إلى ماذا يُحسب padding بالنسبة المئوية؟

إلى عرض الكتلة الحاوية، للجوانب الأربعة. padding-top: 50% نصف عرض الأب لا ارتفاعه، ولهذا استخدمت الحيل القديمة لنسبة العرض إلى الارتفاع الحشوَ العمودي.

Q: كيف أضيف padding في HTML؟

عبر CSS، في ملف أنماط أو في السمة style: . لا يوجد في HTML سمة padding للعناصر العامة؛ والسمة القديمة cellpadding على الجداول ملغاة وحلت محلها padding على td وth.

ما هو padding

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding</title>
  <style>
    .box {
      padding: 24px;
      border: 3px solid #111827;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      width: max-content;
      margin-bottom: 12px;
    }
    .none { padding: 0; }
  </style>
</head>
<body>
  <div class="box none">padding: 0</div>
  <div class="box">padding: 24px (the green band)</div>
</body>
</html>

المنطقة الزرقاء هي المحتوى. الشريط الأخضر حولها هو الحشو بمقدار 24px على كل جانب، والحد يقع خارجه.

اختصار padding: قيمة أو 2 أو 3 أو 4 قيم

تضبط padding الجوانب الأربعة في تصريح واحد. عدد القيم يحدد أي جانب يأخذ أي قيمة، باتجاه عقارب الساعة بدءًا من الأعلى:

التصريح	الأعلى	اليمين	الأسفل	اليسار
`padding: 10px;`	10	10	10	10
`padding: 10px 20px;`	10	20	10	20
`padding: 10px 20px 30px;`	10	20	30	20
`padding: 10px 20px 30px 40px;`	10	20	30	40

قيمتان تعنيان «عمودي، أفقي». ثلاث قيم تعني «الأعلى، الأفقي، الأسفل». أربع قيم تدور مع عقارب الساعة: الأعلى، اليمين، الأسفل، اليسار (وسيلة التذكر الشائعة بالإنجليزية هي TRouBLe).

اكتب أي اختصار أدناه. يُعاد رسم الصندوق ويخبرك المتصفح بما أخذه كل جانب:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding tester</title>
  <style>
    #box {
      width: max-content;
      padding: 10px 20px 30px 40px;
      border: 3px solid #111827;
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      margin-top: 10px;
    }
    code { font-size: 14px; }
  </style>
</head>
<body>
  <label>padding: <input id="val" value="10px 20px 30px 40px" size="24"></label>
  <div id="box">content</div>
  <p><code id="out"></code></p>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.padding = input.value;
      const s = getComputedStyle(box);
      document.getElementById('out').textContent =
        'top ' + s.paddingTop + ', right ' + s.paddingRight +
        ', bottom ' + s.paddingBottom + ', left ' + s.paddingLeft;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

جرّب 8px و8px 24px و0 0 40px و1em 5%. القيمة غير الصالحة، مثل -10px، تُتجاهل ويحتفظ الصندوق بآخر حشو صالح.

جانب واحد في كل مرة

لكل جانب خاصيته الخاصة، وهي أوضح من الاختصار ذي القيم الأربع حين تريد تغيير جانب واحد فقط:

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

الاختصار متبوعًا بجانب واحد نمط شائع: اضبط كل شيء، ثم عدّل جانبًا واحدًا.

.card {
  padding: 16px;
  padding-bottom: 32px; /* only the bottom changes */
}

الترتيب مهم هنا: اختصار padding مكتوب بعد padding-bottom سيعيد الأسفل إلى 16px.

الحشو المنطقي: padding-inline وpadding-block

padding-left وpadding-right خاصيتان فيزيائيتان: تبقيان على الجانب نفسه في كل لغة. أما الخصائص المنطقية فتتبع اتجاه الكتابة، وهذا ما تريده في موقع يُعرض أيضًا من اليمين إلى اليسار. في العربية تكون «البداية» (start) هي الجانب الأيمن:

الخاصية المنطقية	في الإنجليزية (من اليسار إلى اليمين)	في العربية (من اليمين إلى اليسار)
`padding-inline-start`	اليسار	اليمين
`padding-inline-end`	اليمين	اليسار
`padding-inline`	اليسار واليمين	اليمين واليسار
`padding-block`	الأعلى والأسفل	الأعلى والأسفل

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical padding</title>
  <style>
    .note {
      padding-block: 8px;
      padding-inline-start: 40px; /* space before the text */
      padding-inline-end: 12px;
      border-inline-start: 6px solid #2563eb;
      background: #e5e7eb;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <p class="note">The wide padding is at the start of the line.</p>
  <p class="note" dir="rtl">Right to left: the edge and the wide padding switch sides</p>
</body>
</html>

الحشو يكبّر الصندوق (إلا مع border-box)

افتراضيًا تكون width عرض المحتوى وحده، ويُضاف الحشو فوقه. الصندوق الذي عرضه width: 200px مع padding: 20px يصبح عرضه 240px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding and width</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      background: #bfdbfe;
      margin-bottom: 10px;
    }
    .border-box { box-sizing: border-box; background: #bbf7d0; }
  </style>
</head>
<body>
  <div class="box">content-box</div>
  <div class="box border-box">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.offsetWidth + 'px wide';
    });
  </script>
</body>
</html>

تبقي box-sizing: border-box الصندوق عند 200px وتقتطع الحشو من الداخل. تشرح صفحة نموذج الصندوق الحساب كاملًا.

الحشو بالنسبة المئوية

يُقاس الحشو بالنسبة المئوية على عرض الأب، للجوانب الأربعة، بما فيها الأعلى والأسفل:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent padding</title>
  <style>
    .parent { width: 300px; height: 100px; background: #e5e7eb; }
    .child {
      padding-top: 10%; /* 10% of 300px = 30px, not 10% of 100px */
      background: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c"></div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'padding-top: ' + getComputedStyle(document.getElementById('c')).paddingTop;
  </script>
</body>
</html>

من هنا جاءت الحيلة القديمة «padding-top: 56.25%» لصناديق الفيديو بنسبة 16:9. اليوم تؤدي aspect-ratio: 16 / 9 المهمة نفسها مباشرة.

الحشو على الأزرار والروابط

الحشو هو الطريقة الصحيحة لتكبير رابط أو زر، لأن الحشو جزء من العنصر وبالتالي جزء مما يمكنك النقر عليه أو لمسه. الهامش سيضيف مسافة لكن لن يكبّر الهدف.

.btn {
  display: inline-block; /* lets vertical padding take space in the line */
  padding: 10px 18px;    /* a comfortable touch target */
}

القيم التي يقبلها padding

القيمة	مثال	ملاحظات
طول	`12px`، `1rem`، `0.5em`	`em` تتغير مع حجم خط العنصر
نسبة مئوية	`5%`	من عرض الكتلة الحاوية
`0`	`padding: 0`	لا حاجة إلى وحدة
سالبة	`-10px`	غير صالحة، تُتجاهل
`auto`	`auto`	غير صالحة للحشو (تعمل مع الهامش)

أخطاء شائعة

ترتيب خاطئ في الاختصار ذي القيم الأربع. الترتيب: الأعلى، اليمين، الأسفل، اليسار، مع عقارب الساعة.
صندوق يكبر حين تضيف حشوًا. اضبط box-sizing: border-box.
استخدام الحشو للفصل بين عنصرين. المسافة بين العناصر هي الهامش؛ والحشو مسافة داخل عنصر واحد. راجع الفرق بين margin وpadding.
حشو عمودي على رابط سطري يتداخل مع الأسطر الأخرى. اجعله inline-block.
حشو سالب أو padding: auto. كلاهما غير صالح ويُتجاهل بصمت.

الأسئلة الشائعة

ما هو padding في CSS؟

الحشو padding هو المسافة بين محتوى العنصر وحده. هو جزء من العنصر، لذلك تظهر فيه خلفية العنصر ويكبّر المساحة القابلة للنقر في الرابط أو الزر.

ما ترتيب القيم في اختصار padding؟

باتجاه عقارب الساعة بدءًا من الأعلى: padding: top right bottom left;. مع ثلاث قيم: الأعلى، ثم اليسار واليمين، ثم الأسفل؛ ومع قيمتين: الأعلى والأسفل ثم اليسار واليمين؛ ومع قيمة واحدة: الجوانب الأربعة.

هل يزيد padding حجم العنصر؟

مع القيمة الافتراضية box-sizing: content-box نعم: يُضاف الحشو إلى width وheight. ومع box-sizing: border-box يُقتطع الحشو من داخل العرض، فيحتفظ العنصر بالحجم الذي ضبطته.

نسبة إلى ماذا يُحسب padding بالنسبة المئوية؟

إلى عرض الكتلة الحاوية، للجوانب الأربعة. padding-top: 50% نصف عرض الأب لا ارتفاعه، ولهذا استخدمت الحيل القديمة لنسبة العرض إلى الارتفاع الحشوَ العمودي.

هل يمكن أن يكون padding سالبًا؟

لا. قيمة الحشو السالبة غير صالحة ويُتجاهل التصريح. لسحب المحتوى إلى الخارج استخدم هامشًا سالبًا بدلًا من ذلك.

كيف أضيف padding في HTML؟

عبر CSS، في ملف أنماط أو في السمة style: <div style="padding: 16px;">. لا يوجد في HTML سمة padding للعناصر العامة؛ والسمة القديمة cellpadding على الجداول ملغاة وحلت محلها padding على td وth.

مفاهيم ذات صلة