Inline-block: عبارة عن طريقة عرض تحتوي الخصائص التالية:
1-لا تبدأ في سطر جديد.(من خواص ال inline)
1- تحجز العرض بالاعتماد على
المحتوى.(من خواص ال inline)
2- تحجز الطول بالاعتماد على المحتوى. (من خواص ال inline)
3- لا يتم تجزئة العنصر اذا تطلب تجزئة.قطعة واحدة
5- اذا كان مساحة محتوى
العنصرالجديد الذي يحمل الخاصية Inline-block
اكبر من المساحة الفارغة الموجودة ضمن العنصر السابق او ضمن الشاشة فالعنصر
سوف يبدأ في سطر جديد.
6- اذا كان مساحة محتوى العنصر مساوية للمساحة الفارغة في الشاشة او اصغر منها
فالعنصر سوف يبدأ بجانب مساحة العنصر السابق.
7- اذا تم تجزئة العنصر فسوف يتم اعتباره كعنصر واحد وطوله بعد اول مسافة اذا
كان نص وعرضه حسب المحتوى .
8- يمكنك تغيير الطول والعرض.
العناصر:
Span-a-img
المثال
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<div class="element-div-inline-block1">
adipisicing elit. Eveniet ea nisi, ut nulla facilis atque
repellat itaque commodi est non fugiat eaque adipisci quos incidunt,
quisquam praesentium, sit quaerat amet.
</div>
<div class="element-div-inline-block2">
adipisicing elit. Eveniet ea nisi, ut nulla facilis atque
repellat itaque commodi est non fugiat eaque adipisci
</div>
<div class="element-div-inline-block3">
adipisicing elit. Eveniet ea nisi, ut nulla facilis atque
repellat itaque commodi est non fugiat eaque adipisci quos incidunt,
quisquam praesentium, sit quaerat amet.
</div>
</body>
</html>
Css Code
.element-div-inline-block1 {
display:inline-block;
color: black;
background-color: burlywood;
}
.element-div-inline-block2 {
display:inline-block;
color: black;
background-color: rgb(222, 135, 135);
}
.element-div-inline-block3 {
display:inline-block;
color: black;
background-color: rgb(150, 135, 222);
}
النتيجة
.png)
.png){kind=small}