Tässä artikkelissa käsittelemme inline-block elementtien ominaisuuksia. Se on erittäin hyödyllinen CSS:n ominaisuus. Voimme käyttää sitä erilaisiin tunnisteisiin. Se on osa CSS-näyttöominaisuutta.
harald baldr
Käyttö:
display: inline-block
Käyttämällä yllä olevaa ominaisuutta elementti käyttäytyy rivin sisällä ja estää sen alielementtejä. Ymmärretään rivi- ja lohkoelementit.
Sisäiset elementit
Elementtejä, jotka eivät ala uudelta riviltä, kutsutaan rivielementeiksi. Ne yhdistetään osaksi päätekstiä eikä erillistä toimintoa. Nämä elementit vievät vain tarvittavan tilan. Vasemmalle ja oikealle puolelle voidaan lisätä välilyöntejä upotettuun elementtiin, mutta upotetun elementin ylä- tai alareunaan tai marginaaliin ei voi lisätä korkeutta.
Esimerkki tekstin sisäisistä elementeistä:
Esimerkki:
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 Lähtö:
img css align
Block Elements
Uudelta riviltä alkavia elementtejä kutsutaan lohkoelementeiksi. Lohkoelementti hankkii koko tälle sisällölle käytettävissä olevan leveyden. Toisin kuin rivissä, näille elementeille on ylä- ja alamarginaali. Lohkotason elementit voivat näkyä vain body-tunnisteen sisällä. Lohkotason elementit luovat suuremman rakenteen kuin rivielementit.
Esimerkki lohkoelementeistä:
,
tietorakenteet javassa
Esimerkki:
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> Lähtö:
Inline Block Elements
Inline-blockin näyttöarvo toimii samalla tavalla kuin inline yhdellä poikkeuksella: kyseisen elementin korkeutta ja leveyttä voidaan muuttaa.
Esimerkki:
yksinkertainen päivämäärän muotoiluohjelma javassa
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> Lähtö:
Alla on tulostiedosto, jossa on kaikki elementit yhdellä sivulla:
Koodi
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>