I den här artikeln kommer vi att diskutera inline-block elements egenskap. Det är en mycket användbar egenskap hos CSS. Vi kan applicera det på olika taggar. Det är en del av CSS-visningsegenskapen.
java sträng klass
Användande:
display: inline-block
Genom att tillämpa egenskapen ovan kommer elementet att bete sig som inline och block för dess underordnade element. Låt oss förstå inline- och blockelementen.
Inline element
De element som inte börjar på en ny rad kallas inline-element. De kombineras som en del av huvudtexten och inte som en separat handling. Dessa element upptar endast det nödvändiga utrymmet. Mellanslag till vänster och höger kan läggas till i ett inline-element, men det kan inte läggas till höjd till den övre eller nedre stoppningen eller marginalen på ett inline-element.
Exempel på inline-element:
Exempel:
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 Produktion:
hur man inaktiverar utvecklarläget i Android
Blockelement
De element som börjar på en ny rad kallas blockelement. Ett blockelement får hela den bredd som är tillgänglig för det innehållet. Till skillnad från inline finns det en topp- och bottenmarginal för dessa element. Element på blocknivå får endast visas inuti body-taggen. Element på blocknivå skapar en större struktur än inline-element.
Exempel på blockelement:
,
int i sträng
Exempel:
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> Produktion:
Inline blockelement
Visningsvärdet för inline-block fungerar på samma sätt som inline med ett undantag: höjden och bredden på det elementet kan ändras.
Exempel:
konvertera int till sträng i 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> Produktion:
Nedan är utdatafilen med alla element på en sida:
Koda
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>