CSS 布局 - display: inline-block

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;
  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; 
}

స్వయంగా ప్రయత్నించండి

使用 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;
}

స్వయంగా ప్రయత్నించండి