جاري التحميل...

Inline-block في CSS

الدرس السابق رسم خريطة قيم display اليومية. هنا نتمرّن على الهجين: inline-block. تريد الجيران في سطر واحد حين يتسع المكان — كنص — ومع ذلك تريد صندوقًا حقيقيًا يحترم width وheight وpadding. هذه مهمته.

مقارنة جنبًا إلى جنب

📊 inline مقابل inline-block مقابل block

الوضع	سلوك السطر	Width / height / padding
`inline`	يجلس في سطر النص	غالبًا يُتجاهل width/height؛ وقد يبدو padding غريبًا
`inline-block`	يبقى في السطر إن بقي مكان	يعمل width وheight وpadding كصندوق
`block`	يبدأ في سطره الخاص	نموذج الصندوق كامل؛ غالبًا يملأ عرض الصف

اختر inline-block حين يجب أن يشارك العنصر الصف مع أشقائه ويحتاج حجمًا قابلًا للقياس — شارات، وسوم، تسمية أيقونة، أزرار شريط أدوات مضغوطة. اترك أعمدة الصفحة الكاملة والمحاذاة المعقدة لـ Flexbox وGrid لاحقًا.

شارة بحجم ما زالت تشارك السطر

بخلاف inline الصرف، يمكن للشارة أن تحتفظ بـ padding وعرض ثابت بينما تجلس بجانب شارات أخرى.

شارة بحجم

css

.chip {
display: inline-block;
width: 7rem;
padding: 0.4rem 0.75rem;
text-align: center;
border: 1px solid #c5c5c5;
border-radius: 999px;
background: #f7f7f7;
}

شريط أدوات بسيط

عدة عناصر بعرض متساوٍ يمكن أن تجلس في صف واحد. افصلها بـ margin. هذا يكفي لشريط هادئ قبل وصول Flexbox.

شريط أدوات inline-block

css

.tool {
display: inline-block;
width: 5.5rem;
padding: 0.5rem 0;
text-align: center;
margin-right: 0.35rem;
border: 1px solid #0b5fff;
border-radius: 0.35rem;
background: #e8f0ff;
}

المحاذاة العمودية داخل السطر

الصناديق على مستوى السطر قد تختلف ارتفاعاتها بجانب النص أو الصور. vertical-align يضبطها — وmiddle خيار هادئ شائع لزوج أيقونة+تسمية.

حاذِ مع النص

css

.icon {
display: inline-block;
width: 1.25rem;
height: 1.25rem;
vertical-align: middle;
background: #0b5fff;
border-radius: 0.2rem;
}

.label {
display: inline-block;
vertical-align: middle;
margin-left: 0.4rem;
font-weight: 600;
}

فخ فجوة المسافات البيضاء

المتصفحات تعامل المسافات وأسطر جديدة بين الوسوم كعقد نص. بين شقيقي inline-block تتحول تلك المسافة الصغيرة إلى فجوة مرئية. ليست gap في Flexbox — بل بقايا مسافات HTML.

انظر الفجوة

css

/* HTML مثل:
<span class="tile">A</span>
<span class="tile">B</span>
يترك فجوة بسبب السطر الجديد. */
.tile {
display: inline-block;
width: 3rem;
padding: 0.5rem 0;
text-align: center;
background: #fff3cd;
}

لتهدئة الفجوة: ضع الوسوم في سطر واحد بلا مسافة، أو علق السطر الجديد، أو استخدم margin سالبًا صغيرًا بحذر. لاحقًا يعطي Flexbox تباعدًا أنظف — لا تجبر كل صف عبر inline-block إلى الأبد.

عادة inline-block الهادئة

استخدم صنفًا مشتركًا لعناصر الصف. حدد الحجم عمدًا. أصلح المسافات البيضاء فقط حين تؤذي الفجوة. لا تبنِ تخطيط صفحة كاملًا بـ inline-block متداخل — هكذا يعود ألم عصر float. position وfloat لهما دروسهما.

صنف عنصر مشترك

css

.row-item {
display: inline-block;
vertical-align: top;
width: 8rem;
padding: 0.75rem;
margin: 0 0.25rem 0.5rem 0;
border: 1px solid #ddd;
box-sizing: border-box;
}

جرّب بنفسك

ابنِ ثلاثة .chip بـ inline-block وعرض ثابت وpadding — راقبها تشارك سطرًا.
اصنع شريط .tool من أربعة أزرار بعرض متساوٍ وmargin-right.
ضع .icon صغيرًا بجانب .label وجرّب vertical-align: middle.
ضع شقيقي .tile في سطرين HTML ثم في سطر واحد — قارن الفجوة.
اكتب جملة: متى يكفي inline-block ومتى تنتظر Flexbox؟

أخطاء شائعة

توقع أن يحترم inline الصرف width / height كصندوق حقيقي
لوم CSS على «فجوة غامضة» بينما السبب مسافات HTML بين الوسوم
استخدام inline-block لابتكار تخطيط صفحة متعدد الأعمدة بالكامل
معاملة هذا الدرس كمسح display العام (block / none) من الدرس السابق
القفز إلى وصفات position أو float قبل إتقان الهجين

الخلاصة

inline-block يجلس في سطر كنص لكنه يحتفظ بنموذج صندوق حقيقي للحجم والـ padding
مثالي للشارات وأشرطة الأدوات المضغوطة وأزواج أيقونة+تسمية
vertical-align يساعد على محاذاة الجيران مختلفي الارتفاع
المسافات بين الوسوم قد تصنع فجوة مرئية — اعرف السبب
للصفوف المعقدة والفجوات النظيفة يأتي Flexbox لاحقًا؛ أبقِ inline-block مقصودًا

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى

اللغة