V tem članku bomo razpravljali o lastnostih elementov inline-block. Je zelo uporabna lastnost CSS. Lahko ga uporabimo za različne oznake. Je del lastnosti prikaza CSS.
celo število v niz
Uporaba:
display: inline-block
Z uporabo zgornje lastnosti se bo element obnašal kot inline in block za svoje podrejene elemente. Razumejmo inline in blok elemente.
Inline Elements
Elementi, ki se ne začnejo v novi vrstici, so znani kot elementi v vrstici. Združeni so kot del glavnega besedila in ne ločeno dejanje. Ti elementi zavzamejo samo zahtevani prostor. Elementu v vrstici je mogoče dodati presledke na levi in desni strani, ni pa mogoče dodati višine zgornjemu ali spodnjemu oblazinjenju ali robu elementa v vrstici.
Primer vgrajenih elementov:
primer:
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 Izhod:
cast sql
Elementi blokov
Elementi, ki se začnejo v novi vrstici, so znani kot blokovni elementi. Element bloka pridobi celotno širino, ki je na voljo za to vsebino. Za razliko od inline, obstaja zgornji in spodnji rob za te elemente. Elementi na ravni bloka se lahko pojavijo samo znotraj oznake telesa. Elementi na ravni bloka ustvarijo večjo strukturo kot elementi v vrstici.
Primer blokovnih elementov:
,
pete davidson starost
primer:
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> Izhod:
Inline Block Elements
Prikazna vrednost inline-block deluje podobno kot inline z eno izjemo: višina in širina tega elementa postaneta spremenljivi.
primer:
java povratni niz
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> Izhod:
Spodaj je izhodna datoteka z uporabo vseh elementov na eni strani:
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>