سی ایس ایس بیاگ - ڈسپلے: این لائن بلوک

display: inline-block

ਨਾਲ display: inline ਤੁਲਨਾ ਵਿੱਚ ਮੁੱਖ ਅੰਤਰ ਇਹ ਹੈ display: inline-block ਇਲੈਕਟਰਨ 'ਤੇ ਚੌਡਾਈ ਅਤੇ ਉਚਾਈ ਸੈਟ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ。

ਇਸੇ ਤਰ੍ਹਾਂ, ਜੇਕਰ display: inline-block ਸੈਟ ਕੀਤਾ ਗਿਆ ਹੈ, ਤਾਂ ਉੱਪਰਲੇ/ਨੀਚੇ ਬਾਹਰੀ ਮਾਰਜਿਨ/ਅੰਦਰੂਨੀ ਮਾਰਜਿਨ ਬਣੇ ਰਹਿਣਗੇ, ਜਦਕਿ display: inline ਨਹੀਂ ਹੋਵੇਗਾ。

display: block ਨਾਲ ਤੁਲਨਾ ਵਿੱਚ ਮੁੱਖ ਅੰਤਰ ਇਹ ਹੈ ਕਿ display: inline-block ਇਲੈਕਟਰਨ ਦੇ ਬਾਅਦ ਨਹੀਂ ਕੋਲਾਨ ਦਿੰਦਾ, ਇਸ ਲਈ ਇਹ ਇਲੈਕਟਰਨ ਹੋਰ ਇਲੈਕਟਰਨ ਦੇ ਨਾਲ ਸਾਹਮਣੇ ਹੋ ਸਕਦਾ ਹੈ。

ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ display: inline, display: inline-block ਅਤੇ display: block ਦੇ ਵੱਖ-ਵੱਖ ਵਿਵਹਾਰ ਦਿਸਾਇਆ ਗਿਆ ਹੈ:

مثال

span.a {
  display: inline; /* span 的默认值 */
  width: 100px;
  height: 100px;
  padding: 5px;
  بوردر: 1 پیکس solid بلو; 
  پس منظر رنگ: yellow؛ 
}
span.b {
  استعمال: inline-block؛
  width: 100px;
  height: 100px;
  padding: 5px;
  بوردر: 1 پیکس solid بلو; 
  پس منظر رنگ: yellow؛ 
}
span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  بوردر: 1 پیکس solid بلو; 
  پس منظر رنگ: yellow؛ 
}

خود کا تجربہ کریئن

ناٹنگ لینک بنانے کیلئے inline-block استعمال کریئن

استعمال کا ایک مشہور طریقہ:inline-block لائحہ آئٹمز کو افقی بجائے ووقتی طور پر دکھانے کیلئے استعمال کیا جاتا ہے۔ نیز مثال، ایک افقی ناٹنگ لینک بنایا گیا ہے:

مثال

.nav {
  پس منظر رنگ: yellow؛ 
  لیسٹ اسٹائل: none؛
  مقابلہ: مرکزی؛ 
  پیدائش: 0؛
  کسی چھوٹی کیوئنٹی: 0؛
}
.nav li {
  استعمال: inline-block؛
  فون سائز: 20 پیکس؛
  پیدائش: 20 پیکس؛
}

خود کا تجربہ کریئن