طرح‌بندی CSS - display: inline-block

عرض: على التوالي-كتلة

على عرض: على التوالي على عكس عرض: على التوالي-كتلة يتيح تعيين العرض والارتفاع على العنصر.

بالنسبة نفسها، إذا تم تعيين display: على التوالي-كتلة، سيتم الحفاظ على الهوامش العلوية والسفلية والخارجية والداخلية، بينما لن يتم ذلك في case display: على التوالي.

على عكس display: كتلة، الفرق الرئيسي يكمن في أن display: على التوالي-كتلة لا يضيف سطرًا جديدًا بعد العنصر، لذا يمكن للعنصر أن يكون بجانب عناصر أخرى.

في المثال التالي، يتم عرض السلوكيات المختلفة لـ display: على التوالي، display: على التوالي-كتلة، و display: كتلة:

مثال

سبان.أ {
  عرض: على التوالي; /* القيمة الافتراضية لسبان */
  العرض: 100 بكسل;
  الارتفاع: 100 بكسل;
  ملء: 5 بكسل;
  border: 1px solid blue; 
  background-color: yellow; 
}
سبان.ب {
  display: inline-block;
  العرض: 100 بكسل;
  الارتفاع: 100 بكسل;
  ملء: 5 بكسل;
  border: 1px solid blue; 
  background-color: yellow; 
}
سبان.ك {
  عرض: كتلة;
  العرض: 100 بكسل;
  الارتفاع: 100 بكسل;
  ملء: 5 بكسل;
  border: 1px solid blue; 
  background-color: yellow; 
}

جرب بنفسك

استخدام inline-block لإنشاء رابط توجيهي

استخدام display كطريقة شائعة:inline-block يستخدم هذا المثال لعرض العناصر على شكل قائمة أفقي بدلاً من العمودي. على سبيل المثال، يمكن إنشاء رابط توجيهي أفقي كالتالي:

مثال

.nav {
  background-color: yellow; 
  list-style-type: none;
  text-align: center; 
  padding: 0;
  margin: 0;
}
.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

جرب بنفسك