Jassif Team Institution

The CSS display: inline-block

display: inline-block பண்பானது inline மற்றும் block உறுப்புகள் இரண்டின் அம்சங்களையும் இணைக்கிறது.

display: inline-block கொண்ட உறுப்பு மற்ற inline அல்லது inline-block உறுப்புகளுடன் அதே வரியில் தோன்றும். கூடுதலாக, உறுப்புக்கு width, height, margin-top, மற்றும் margin-bottom பண்புகளை அமைக்கலாம் (block உறுப்புகளைப் போல).

பின்வரும் எடுத்துக்காட்டு display: inline, display: inline-block மற்றும் display: block இன் வெவ்வேறு நடத்தையைக் காட்டுகிறது:

Display Comparison Example

span.a {
  display: inline; /* the default for span */
  padding: 5px;
  border: 2px solid red;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 35px;
  padding: 5px;
  border: 2px solid red;
}

span.c {
  display: block;
  width: 100px;
  height: 35px;
  padding: 5px;
  border: 2px solid red;
}

Create a Horizontal Navigation Menu

display: inline-block க்கான பொதுவான பயன்பாடு பட்டியல் உருப்படிகளை செங்குத்தாக காட்டுவதற்குப் பதிலாக கிடைமட்டமாகக் காட்டுவதாகும். பின்வரும் எடுத்துக்காட்டு ஒரு கிடைமட்ட வழிசெலுத்தல் மெனுவை உருவாக்குகிறது:

.nav {
  background-color: lightgray;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 18px;
  padding: 15px;
}

Exercise

inline-block பயன்படுத்தி பட்டியல் உருப்படிகளை கிடைமட்டமாகக் காட்ட சரியான பண்பு மற்றும் மதிப்பை இழுத்து விடவும்.

CSS Property

காட்சி நடத்தை தொடர்பான CSS பண்பு: