CSS Inline-block الكتلة الداخلية
CSS - الخاصية inline-block
🔸 تُستخدم الخاصية inline-block لجعل العنصر يعرض كسطر (inline)، لكنه يحتفظ بخواص العناصر الكتلية (block) مثل إمكانية تحديد العرض والارتفاع.
✅ الفرق بين inline و block و inline-block
- block: العنصر يأخذ كامل عرض السطر، ويمكن تحديد أبعاده.
- inline: العنصر داخل السطر، ولا يمكن تحديد عرض/ارتفاع.
- inline-block: عنصر داخل السطر ويمكن تحديد أبعاده مثل block.
🧪 مثال على inline-block
<!DOCTYPE html>
<html>
<head>
<style>
.box {
display: inline-block;
width: 150px;
height: 100px;
background-color: coral;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">مربع 1</div>
<div class="box">مربع 2</div>
<div class="box">مربع 3</div>
</body>
</html>
📌 العناصر هنا ظهرت بجانب بعض (في نفس السطر)، مع إمكانية تحديد العرض والارتفاع.
📌 ملاحظات هامة
- العناصر ذات
display: inline-blockتتأثر بـvertical-align(محاذاة رأسية). - وجود فراغات بين العناصر في الكود (مثل مسافة أو سطر جديد) قد يؤدي إلى فراغات على الشاشة.
- لحذف الفراغات بين العناصر، يمكن إزالتها من الكود أو استخدام تعليقات HTML.
تعليقات
إرسال تعليق