26- تصميم CSS – العرض: display: inline-block

قيمة العرض: display: inline-block

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

يوضح المثال التالي السلوك المختلف لكل من display: inline, display: inline-block و display: block:

الفرق الرئيسي بين display: inline-block و display: block هو أن display: inline-block لا يضيف فصلاً جديدًا (line-break) بعد العنصر، مما يسمح للعنصر بالظهور بجوار عناصر أخرى.

الفرق الرئيسي بين display: inline-block و display: block هو أن display: inline-block لا يضيف فصلاً جديدًا (line-break) بعد العنصر، مما يسمح للعنصر بالظهور بجوار عناصر أخرى.

يوضح المثال التالي السلوك المختلف لكل من display: inline, display: inline-block و display: block:

span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

استخدام display: 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;
}