I denne artikkelen vil vi diskutere inline-block elements egenskap. Det er en veldig nyttig egenskap ved CSS. Vi kan bruke det på forskjellige tagger. Det er en del av CSS-visningsegenskapen.
hiba bukhari
Bruk:
display: inline-block
Ved å bruke egenskapen ovenfor, vil elementet oppføre seg som inline og blokk for sine underordnede elementer. La oss forstå inline- og blokkelementene.
Innebygde elementer
Elementene som ikke begynner på en ny linje er kjent som inline-elementer. De er kombinert som en del av hovedteksten og ikke en egen handling. Disse elementene opptar bare den nødvendige plassen. Mellomrom til venstre og høyre kan legges til et innebygd element, men det kan ikke legges til høyde til topp- eller bunnpolstringen eller margen til et innebygd element.
Eksempel på innebygde elementer:
Eksempel:
Page Title .highlight{ background-color:#efefef} It is a demo span <span>inline element</span>; whose span is an highlighted with a grey color indicating that it is an inline tag Produksjon:
rihanna alder
Blokkelementer
Elementene som begynner på en ny linje er kjent som blokkelementer. Et blokkelement får opp hele bredden som er tilgjengelig for det innholdet. I motsetning til inline, finnes det en topp- og bunnmargin for disse elementene. Elementer på blokknivå kan bare vises inne i body-taggen. Elementer på blokknivå skaper en større struktur enn inline-elementer.
Eksempel på blokkelementer:
,
java hale
Eksempel:
Page Title p { background-color: #8A55; } <p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p> Produksjon:
Inline blokkelementer
Visningsverdien til inline-blokk fungerer på samme måte som inline med ett unntak: høyden og bredden på det elementet kan endres.
Eksempel:
ternær operatør java
span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; color:white; border: 1px solid blue; background-color: blue; } This is an example of inline-block element with a span colored as blue <span>Inline-Block</span> Produksjon:
Nedenfor er utdatafilen som bruker alle elementene på én side:
Kode
span.a { display: inline; /* the default for span */ width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: blue; } span.b { display: inline-block; width: 100px; height: 100px; padding: 5px; border: 1px solid white; background-color: green; } span.c { display: block; width: 70px; height: 50px; padding: 5px; border: 1px solid blue; background-color: pink; } <h2>display: inline</h2> This is section with a inline span made blue <span>inline</span> <span>element</span> <h2>display: block</h2> This is section with a block span made pink <span>block</span> <span>element</span> . <h2>display: inline-block</h2> This is section with a inline block span made green<span>inline</span> <span>block</span>