الكورس

Advertisements

CSS Inline-block


display: inline-block Value

 

يشبه عنصر الـ inline-block إلى حد كبير عنصر الـ inline من حيث أنه سيتم ضبطه بما يتوافق مع التدفق الطبيعي للنص (على “الخط الأساسي”)، الفرق هو أنك قادر على تعيين العرض والارتفاع الذي سيتم تحديده.

أيضا ، مع قيمة الـ inline-block ، يتم احترام margins العلوية والسفلية و الـ padding، ولكن مع قيمة الـ inline لا يتم احترامها ويتم تجاوزها.

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

 

مثال للتوضيح:

.container a {
  display: inline-block;
  background-color: #f00;
  color: #fff;
  padding: 19px;
  border-radius: 5px;
}

output:

 

💡 تذكر: أن وسم الـ a القيمة الإفتراضية له inline.



الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

[email protected]

شكرًا لك على مساعدتك لنا!

Advertisements