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

Q: ما الفرق بين block وinline وinline-block؟

العنصر block يبدأ في سطر جديد ويملأ العرض المتاح. والعنصر inline ينساب داخل النص ويتجاهل width وheight والهوامش العمودية. أما inline-block فينساب داخل النص مثل inline لكنه يقبل العرض والارتفاع والحشو والهوامش مثل block.

Q: ما الفرق بين display: none وvisibility: hidden؟

تزيل display: none العنصر ومساحته. أما visibility: hidden فتجعله غير مرئي لكنها تحفظ مساحته في التخطيط، فلا يتحرك شيء.

Q: هل div عنصر block أم inline افتراضيًا؟

block. العناصر div وp والعناوين وul وsection وform من نوع block افتراضيًا؛ أما span وa وstrong وem وimg وinput وbutton فمن نوع inline أو inline-block.

ماذا تفعل display

لكل عنصر قيمة display تقرر كيف يُرتَّب في التخطيط. القيم الثلاث التي تقابلها أولًا هي block وinline وinline-block. هذه ثلاثة صناديق متطابقة، لها width وheight وpadding وmargin نفسها، وdisplay وحدها تختلف:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>block, inline, inline-block</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    .demo { border: 1px dashed #9ca3af; padding: 8px; margin-bottom: 12px; }
    .box {
      width: 120px; height: 40px;
      padding: 6px; margin: 10px;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
  </style>
</head>
<body>
  <div class="demo">Text before <span class="box block" id="b">block</span> text after.</div>
  <div class="demo">Text before <span class="box inline" id="i">inline</span> text after.</div>
  <div class="demo">Text before <span class="box inline-block" id="ib">inline-block</span> text after.</div>
</body>
</html>

	`block`	`inline`	`inline-block`
يبدأ في سطر جديد	نعم	لا	لا
العرض الافتراضي	يملأ الحاوية	بقدر المحتوى	بقدر المحتوى
`width` و`height`	تُطبقان	تُتجاهلان	تُطبقان
الهامش العمودي	يُطبق	يُتجاهل	يُطبق
الحشو العمودي	يدفع المحتوى	يُطلى، لكنه لا يباعد بين الأسطر	يدفع المحتوى
عناصر نموذجية	`div`، `p`، `h1`، `ul`، `section`	`span`، `a`، `strong`، `em`	`button`، `input`، `img` (العناصر المستبدلة تتصرف هكذا)

في المعاينة يقع صندوق block في سطره الخاص بعرض 120px. أما صندوق inline فيتجاهل العرض والارتفاع ويحيط بكلمته فقط، ويبرز حشوه العمودي وحده فوق السطر وتحته من دون أن يزيد ارتفاع السطر. ويبقى صندوق inline-block في سطر النص لكنه يحتفظ بحجمه الكامل.

display: block

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

.menu a {
  display: block;       /* the full row is the link */
  padding: 10px 16px;
}

يمكن ضبط عرض العنصر الكتلي، وmargin: 0 auto توسّطه حين يكون له عرض، كما تعرض صفحة توسيط div.

display: inline-block

inline-block هي الحل الوسط: تنساب في السطر كالكلمة، لكن يمكنك تحديد حجمها. تفيد في الشارات والأزرار والأيقونات داخل النص:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>inline-block badges</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      display: inline-block;
      min-width: 24px;
      padding: 2px 8px;
      margin-inline-start: 4px;
      border-radius: 999px;
      background: #dc2626; color: white;
      font-size: 12px; font-weight: 700; text-align: center;
    }
  </style>
</head>
<body>
  <p>Inbox <span class="badge">3</span></p>
  <p>Notifications <span class="badge">12</span></p>
</body>
</html>

عدة صناديق inline-block في صف واحد تحصل على فجوة صغيرة بينها من المسافات البيضاء في HTML. لصفوف الصناديق، display: flex على الأب هي الأداة الأفضل.

display: none مقابل visibility: hidden

كلاهما يجعل العنصر غير مرئي. الفرق هو هل يحتفظ بمساحته:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>none vs hidden</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; margin-bottom: 12px; }
    .row div { width: 70px; padding: 12px 0; text-align: center; background: #bbf7d0; border: 2px solid #16a34a; }
    .none { display: none; }
    .hidden { visibility: hidden; }
  </style>
</head>
<body>
  <div class="row"><div>1</div><div>2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="none">2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="hidden">2</div><div>3</div></div>
  <button type="button" id="toggle">Toggle box 2 in the first row</button>
  <script>
    document.getElementById('toggle').addEventListener('click', () => {
      document.querySelector('.row div:nth-child(2)').classList.toggle('none');
    });
  </script>
</body>
</html>

	`display: none`	`visibility: hidden`	`opacity: 0`
يشغل مساحة	لا	نعم	نعم
يمكن النقر عليه	لا	لا	نعم
تقرؤه قارئات الشاشة	لا	لا	نعم
يمكن تحريكه بسلاسة	لا	لا	نعم

السمة hidden في HTML تفعل ما تفعله display: none عبر ملف أنماط المتصفح، وهذا يعني أن أي قاعدة CSS تضبط display على العنصر (مثلًا .card { display: flex; }) تتجاوزها فيظهر العنصر من جديد. أضف [hidden] { display: none !important; } إن واجهتك هذه المشكلة.

لإخفاء شيء بصريًا مع إبقائه لقارئات الشاشة (تسمية لزر أيقونة مثلًا)، استخدم فئة «مخفي بصريًا» بدل display: none.

display: flex وdisplay: grid

هاتان القيمتان تحوّلان العنصر إلى حاوية تخطيط لأبنائه:

ترتّب display: flex الأبناء في صف أو عمود واحد، مع التحكم في المحاذاة والمسافات. راجع flexbox.
تضع display: grid الأبناء على صفوف وأعمدة في الوقت نفسه.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex and grid</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .item { padding: 10px; background: #fde68a; border: 2px solid #f59e0b; text-align: center; }
    .flex { display: flex; gap: 8px; margin-bottom: 16px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  </style>
</head>
<body>
  <div class="flex"><div class="item">flex 1</div><div class="item">flex 2</div><div class="item">flex 3</div></div>
  <div class="grid">
    <div class="item">grid 1</div><div class="item">grid 2</div><div class="item">grid 3</div>
    <div class="item">grid 4</div><div class="item">grid 5</div>
  </div>
</body>
</html>

تبقى الحاوية نفسها block. وتفعل inline-flex وinline-grid الشيء نفسه للأبناء لكن تجعل الحاوية تنساب سطريًا، مثل inline-block.

القيم الأخرى

القيمة	ماذا تفعل
`flow-root`	عنصر كتلي يحتوي عناصره العائمة ويمنع تسرب هوامش الأبناء إلى الخارج؛ هو «clearfix» الحديث
`contents`	يختفي صندوق العنصر نفسه ويتصرف أبناؤه كأبناء لأبيه. تجنبها على الأزرار والقوائم والجداول: بعض المتصفحات تُسقط معنى العنصر لقارئات الشاشة
`list-item`	عنصر كتلي مع علامة قائمة، وهي القيمة الافتراضية لـ `li`
`table`، `table-row`، `table-cell`	تخطيط الجداول على عناصر ليست جداول
`inline-flex`، `inline-grid`	حاوية flex أو grid تقع سطريًا

أخطاء شائعة

ضبط width أو height على span أو a. العناصر السطرية تتجاهلهما. استخدم inline-block أو block.
هامش عمودي على عنصر سطري. يُتجاهل أيضًا. والحل نفسه.
استخدام display: none لإخفاء نص مخصص لقارئات الشاشة. تخفيه عنها أيضًا.
توقع ظهور ابن داخل أب عليه display: none. لا يُعرض شيء داخل أب مخفي.
قاعدة display تتجاوز السمة hidden. قاعدة CSS هي التي تفوز.
محاولة تحريك display. ضبط display: none يخفي العنصر فورًا، بلا تلاشٍ؛ حرّك opacity وبدّل display (أو visibility) في النهاية.

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

ما الفرق بين block وinline وinline-block؟

العنصر block يبدأ في سطر جديد ويملأ العرض المتاح. والعنصر inline ينساب داخل النص ويتجاهل width وheight والهوامش العمودية. أما inline-block فينساب داخل النص مثل inline لكنه يقبل العرض والارتفاع والحشو والهوامش مثل block.

ماذا تفعل display: none؟

تزيل العنصر من الصفحة تمامًا: لا يشغل مساحة، ولا يُعرض، ويُخفى عن قارئات الشاشة. يُخفى أبناؤه معه ولا يمكن إظهارهم بقيمة display خاصة بهم.

ما الفرق بين display: none وvisibility: hidden؟

تزيل display: none العنصر ومساحته. أما visibility: hidden فتجعله غير مرئي لكنها تحفظ مساحته في التخطيط، فلا يتحرك شيء.

هل div عنصر block أم inline افتراضيًا؟

block. العناصر div وp والعناوين وul وsection وform من نوع block افتراضيًا؛ أما span وa وstrong وem وimg وinput وbutton فمن نوع inline أو inline-block.

لماذا توجد فجوة بين عناصر inline-block؟

المسافات البيضاء بين الوسوم في HTML تُعرض كمسافة، تمامًا كما بين الكلمات. استخدم display: flex مع gap على الأب بدلًا من ذلك، أو احذف المسافات البيضاء.

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