 |
ماهي inline في css
inline: عبارة عن طريقة عرض تحتوي الخصائص التالية:
1-لاتبدأ في سطر جديد (يتم اضافة العنصر بعد العنصر السابق مباشرة).
2- تحجز العرض بالاعتماد على المحتوى.
3- تحجز الطول بالاعتماد على المحتوى.
4-العنصر الذي يأتي بعدها يكون
في نفس السطر ولا يكون في سطر جديد لانه محجوز حسب محتوى العنصر فقط.
5- العنصر الذي يأتي بعدها يبدأ مبأشرة بعدها اي اذا كان هناك مساحة فارغة
يبدأ فيها
6-اذا تم تجزئة العنصر فسوف
يتم اعتباره كعنصر جديد وياخذ ال padding , margin الافتراضي . لانه لايمكنه
تغيير قمية الطول والعرض.
7- لا تستطيع ضبط الطول والعرض
اي يتم تجاهلها حتى لو اضفتها.
المثال
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-inline1">
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-inline2">
adipisicing elit. Eveniet ea nisi, ut nulla facilis atque
repellat itaque commodi est non fugiat eaque adipisci
</div>
<div class="element-div-inline3">
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-inline1 {
display:inline;
color: black;
background-color: burlywood;
}
.element-div-inline2 {
display:inline;
color: black;
background-color: rgb(222, 135, 135);
}
.element-div-inline3 {
display:inline;
color: black;
background-color: rgb(150, 135, 222);
}
النتيجة
.png)