In dit artikel bespreken we de eigenschap van inline-blokelementen. Het is een zeer nuttige eigenschap van CSS. We kunnen het op verschillende tags toepassen. Het maakt deel uit van de CSS-weergave-eigenschap.
nump uniek
Gebruik:
display: inline-block
Door de bovenstaande eigenschap toe te passen, zal het element zich als inline en blok gedragen voor zijn onderliggende elementen. Laten we de inline- en blokelementen begrijpen.
Inline-elementen
De elementen die niet op een nieuwe regel beginnen, worden inline-elementen genoemd. Ze worden gecombineerd als onderdeel van de hoofdtekst en niet als afzonderlijke actie. Deze elementen nemen alleen de benodigde ruimte in beslag. Er kunnen spaties aan de linker- en rechterkant worden toegevoegd aan een inline-element, maar er kan geen hoogte worden toegevoegd aan de bovenste of onderste opvulling of marge van een inline-element.
Voorbeeld van Inline-elementen:
Voorbeeld:
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 Uitgang:
wat is autowired in java
Blokelementen
De elementen die op een nieuwe regel beginnen, worden blokelementen genoemd. Een blokelement krijgt de volledige breedte die beschikbaar is voor die inhoud. In tegenstelling tot inline bestaat er voor deze elementen een boven- en ondermarge. Elementen op blokniveau mogen alleen binnen de body-tag voorkomen. Elementen op blokniveau creëren een grotere structuur dan inline-elementen.
Voorbeeld van blokelementen:
,
pete davidson leeftijd
Voorbeeld:
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> Uitgang:
Inline blokelementen
De weergavewaarde van inline-block werkt op dezelfde manier als inline, met één uitzondering: de hoogte en breedte van dat element kunnen worden gewijzigd.
Voorbeeld:
referentievariabele in 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> Uitgang:
Hieronder vindt u het uitvoerbestand met alle elementen op één pagina:
Code
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>