Cascading Style Sheets (CSS) fungerer som et stilarksspråk som er sentralt for å definere den visuelle fremstillingen av HTML- og XML-dokumenter. Med CSS får utviklere muligheten til å styre og modifisere stilen, utseendet og strukturen til elementer som presenteres på nettsider.
Dette gir utviklere muligheten til å tilpasse fonter, farger, bakgrunner, animasjonseffekter, og til og med skape nettsider som er responsive, det vil si at de tilpasser seg ulike skjermstørrelser og enheter. CSS gjør det også enkelt for merkevarer og utviklere å skape nettsider med gjennomgående stiler som harmonerer med merkets visuelle identitet.
Når et HTML-dokument opprettes uten spesifikk styling, vil HTML-elementene bli vist i den rekkefølgen de er plassert i kildekoden. Dette refereres til som den normale flyten.
I en situasjon med normal flyt, der HTML-elementers layout ikke er endret, kan vi dele HTML-elementer inn i to kategorier basert på hvordan de vises på siden.
Disse to kategoriene er inline-elementer og blokkelementer. La oss utforske disse for å forstå hvordan HTML-elementer vises.
For å følge med, lag en ny mappe og opprett en fil ved navn index.html og en annen fil ved navn app.css i mappen. Du står fritt til å velge andre navn, men filendelsene må være henholdsvis .html og .css.
Åpne HTML-filen i en kodeeditor og legg inn følgende kode:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Display Property</title> <link rel="stylesheet" href="https://wilku.top/which-css-display-style-is-best-for-you/app.css"> </head> <body> </body> </html>
Koden skaper et basisrammeverk for HTML, der vi kan begynne å utvikle nettsider. Den kobler også index.html til app.css-filen, noe som gjør at vi kan endre og styre hvordan HTML-elementer vises ved hjelp av CSS.
HTML-koden som presenteres senere i artikkelen, skal legges mellom <body></body>-taggene. CSS-filen vil i utgangspunktet være tom.
Blokkelementer
Blokkelementer tar opp hele den tilgjengelige horisontale plassen der de vises og skaper en ny linje både før og etter elementet. De tar også opp en vertikal høyde som tilsvarer høyden på innholdet sitt, og skaper dermed blokker.
Noen eksempler på blokkelementer inkluderer <div>, <p>, <ul>, <ol>, <li> og overskrifter som <h1>, <h2>, <h3> osv.
Et eksempel på dette kan sees nedenfor:
<body>
<h1>tipsbilk.net</h1>
<p>tipsbilk.net er en nettpublikasjon som produserer artikler av høy kvalitet om teknologi, næringsliv og finans for å hjelpe bedrifter og enkeltpersoner å vokse. Noen av temaene som dekkes inkluderer:</p>
<p>Noen av temaene som tipsbilk.net dekker inkluderer:</p>
<ul>
<li>Programmering</li>
<li>Cyber Security</li>
<li>Digital Forensics</li>
<li>Produktivitet</li>
<li>Gaming</li>
</ul>
</body>
Når du åpner HTML-dokumentet i en nettleser og inspiserer siden, vil resultatet se ut som følger:
Merk at <h1>-elementet med overskriften «tipsbilk.net» tar opp all tilgjengelig horisontal plass, og avsnittet som kommer etter skyves til neste linje. Dette er hvordan blokkelementer fungerer.
Inline-elementer
Inline-elementer er de som plasseres sammen med andre elementer på samme linje, og de tar bare opp den plassen som er nødvendig for at de skal vises. Inline-elementer starter ikke på en ny linje, og de dytter heller ikke andre elementer ned til en ny linje.
Inline-elementer bryter ikke flyten i innholdet. De flyter naturlig med innholdet uten å danne separate blokker. Eksempler på inline-elementer inkluderer <span>, <a>, <input> og <time>.
Se koden nedenfor, som endrer vår tidligere kode til å inkludere inline-elementer:
<body>
<h1>tipsbilk.net</h1>
<p>tipsbilk.net <span>JEG ER ET SPAN-ELEMENT</span> er en nettpublikasjon som produserer artikler av høy kvalitet om teknologi, næringsliv og finans for å hjelpe bedrifter og enkeltpersoner å vokse. Noen av <a href="https://wilku.top/which-css-display-style-is-best-for-you/tipsbilk.net.com">temaene</a> som dekkes inkluderer:</p>
<p>Noen av temaene som tipsbilk.net dekker inkluderer:</p>
<ul>
<li>Programmering</li>
<li>Cyber Security</li>
<li>Digital Forensics</li>
<li>Produktivitet</li>
<li>Gaming</li>
</ul>
</body>
Resultatet av inspeksjonen av den nye HTML-siden vises nedenfor:
Merk hvordan <span>-elementet passer inn på samme linje med annet innhold uten å avbryte flyten. Dette er hvordan inline-elementer fungerer.
Display-egenskapen
Som vi har sett, er HTML-elementer som standard enten blokkelementer eller inline-elementer, noe som bestemmer hvordan de vises og hvordan de påvirker den normale flyten av innhold i et HTML-dokument.
Som webutvikler kan du ønske å endre denne standardatferden. Det vil si at et element som i utgangspunktet er et blokkelement, skal behandles som et inline-element, eller omvendt. For eksempel vil du kanskje at en <h1>, som som standard er et blokkelement, skal være et inline-element, eller en <span>, som i utgangspunktet er inline, skal være et blokkelement.
For å endre standardatferden til blokk- og inline-elementer bruker vi display-egenskapen. Denne CSS-egenskapen lar deg endre eller angi om et element skal behandles som et inline-element eller et blokkelement.
Ved å bruke display-egenskapen kan du konvertere et element som i utgangspunktet er et blokkelement til et inline-element og omvendt.
For å se dette i praksis, legg følgende kode inn i CSS-filen du opprettet, og oppdater HTML-siden i nettleseren:
h1 {
display: inline;
background-color: paleturquoise;
}
p {
display: inline;
background-color: palevioletred;
}
span {
display: block;
background-color: darkolivegreen;
}
ul {
background-color: yellow;
}
Koden bruker display-egenskapen til å endre <h1>– og <p>-elementene, som er blokkelementer som standard, til inline. Den endrer også <span>-elementet, som i utgangspunktet er inline, til å bli et blokkelement, og den legger til forskjellige bakgrunnsfarger for å lettere kunne skille elementene. Det endelige HTML-dokumentet etter endringer i CSS-filen ser ut som følger:
Merk at <h1>-elementet, som tidligere okkuperte en hel blokk, nå deler samme linje som <p>-elementet, som også tidligere okkuperte en hel blokk. Span-elementet med mørk olivengrønn bakgrunnsfarge opptar nå en hel blokk, selv om standardatferden er å passe på samme linje med andre elementer.
Viktig forskjell mellom inline- og blokkelementer
I tillegg til hvordan de påvirker flyten av innholdet, er det en annen viktig forskjell mellom inline- og blokkelementer.
Med inline-elementer vil egenskapene for bredde og høyde bli ignorert, dersom elementet har slike definert. Det betyr at man ikke kan endre bredden eller høyden på et inline-element.
Dersom man legger til en margin til et inline-element, vil marginen kun bli respektert horisontalt. Den vertikale marginen på et inline-element blir ignorert.
Hvis du legger til polstring til et inline-element, blir det også kun respektert horisontalt. Selv om polstringen også vil vises vertikalt, vil den ikke respekteres av resten av elementene rundt. Derfor vil ikke polstringen forstyrre innholdet over eller under det inline-elementet.
For å demonstrere dette, slett eller kommenter ut all koden i CSS-filen og legg til følgende kode:
span {
height: 500px;
width: 400px;
margin: 20px;
background-color: darkolivegreen;
}
a {
padding: 20px;
border: 1px solid black;
}
Den resulterende HTML-siden vises nedenfor:
Merk at selv om <span>-elementet hadde en egenskap for høyde og bredde, har høyden og bredden ikke endret seg. I tillegg brukes marginen som er lagt til alle sider av <span>-elementet kun horisontalt.
Med <a>-elementet ser man at selv om polstring er lagt til rundt det, påvirker det kun innholdet på samme linje som elementet. Elementene over har ikke blitt påvirket på noen måte.
Med blokkelementer blir egenskapene for bredde og høyde respektert. Marginer og polstring brukt på blokkelementer blir også respektert og trer i kraft i alle retninger.
For å se dette i praksis, legg til følgende kode i den eksisterende CSS-filen:
h1 {
height: 50px;
width: 200px;
border: 1px solid black;
padding: 50px;
margin: 35px;
background-color: aquamarine;
}
Den resulterende HTML-en ser ut som følger:
Merk at bredden, høyden, margene og polstringen som er lagt til <h1>-elementet (et blokkelement), har blitt respektert i alle retninger.
Ut fra forskjellene i hvordan bredde, høyde, marg og polstring brukes på inline- og blokkelementer, får vi en tredje display-verdi som kan brukes med display-egenskapen for å endre hvordan elementer vises. Denne verdien er inline-block.
Inline-blokkelementer
Et inline-block-element oppfører seg som et inline-element, det vil si at det plasseres sammen med andre elementer på samme linje uten å dytte elementer til en ny linje. I motsetning til inline-elementer, blir bredde, høyde, marg og polstring respektert for inline-block-elementer.
Derfor bruker du inline-block når du vil at et element skal oppføre seg som et inline-element, men samtidig gi deg muligheten til å legge til bredde, høyde, marg og polstring som vil gjelde for elementet som om det var et blokkelement. Det vil si at egenskapene vil bli brukt og respektert i alle retninger.
For å se dette i praksis, slett eller kommenter ut all kode i CSS-filen, og legg til følgende kode:
span {
display: inline-block;
background-color: darkolivegreen;
height: 50px;
width: 200px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
CSS-koden over setter display-egenskapen for <span> til inline-block. <span> er som standard et inline-element. Koden legger deretter til bredde, høyde, marg og polstring til <span>-elementet. Resultatet vises nedenfor:
Merk at bredden, høyden, margene og polstringen som er lagt til <span>-elementet alle har blitt respektert, og at span-elementet likevel vises som et inline-element.
Dette er hvordan inline-block-elementer oppfører seg. Tidligere forsøkte vi å legge til de samme egenskapene til <span>-elementet, men de ble ikke respektert fordi <span> var et inline-element på den tiden.
Inline vs. Inline-Block
Forskjellene mellom inline og inline-block er vist i tabellen nedenfor:
| Karakteristikk | Inline | Inline-Block |
| Display atferd | Påvirkes av linjehøyde-egenskapen. | Respekterer horisontale marger og polstring. |
| Bredde og høyde | Ignorerer bredde- og høydeegenskaper. | Respekterer bredde- og høydeegenskaper. |
| Marger og polstring | Ignorerer horisontale marger og polstring. Flyter i innholdet, starter ikke på en ny linje. | Påvirkes av linjehøydeegenskapen. |
| Horisontal layout | Ignorerer egenskaper for tekstjustering og tekstjustering. | Reagerer på egenskaper for tekstjustering og tekstjustering. |
Som du kan se, er inline- og inline-block-elementer forskjellige i hvordan visse CSS-egenskaper oppfører seg når de brukes på dem.
Når du skal bruke Inline og Inline-Block
Som utvikler kan du bruke inline-alternativet når du vil at HTML-innholdet ditt skal flyte innenfor samme linje uten å forårsake linjeskift. For eksempel når du jobber med inline-elementer som <a>, <strong> og <span>, er det logisk å bruke inline-alternativet, som er deres standardoppførsel.
På den annen side, bruk inline-block når du vil at et element skal oppføre seg som et blokkelement, men fortsatt flyte i innholdet uten å forårsake linjeskift og dytte resten av innholdet ned til nye linjer. Det vil si at du bruker inline-block hvis du vil ha kontroll over bredden, høyden, marg- og polstringsegenskapene til et element, samtidig som elementet skal være en del av den naturlige inline-flyten.
Konklusjon
CSS har inline-, blokk- og inline-block-display-alternativer som kan brukes til å endre eller kontrollere hvordan elementer vises på en nettside. Vi bruker display-egenskapen til å angi at et element skal være inline, block eller inline-block.
Som webutvikler er det avgjørende å forstå forskjellene mellom inline-, block- og inline-block-elementer. Bruk denne artikkelen for å bli kjent med dem og begynne å bruke display-egenskapen i dine prosjekter for å få mer erfaring.
Du kan også utforske noen CSS Grid Generatorer for å bygge komplekse oppsett på en visuell måte.