Forskjellene mellom blokknivå og innebygde elementer

HTML består av forskjellige elementer som fungerer som byggesteinene til websider. Hvert av disse elementene faller inn i en av to kategorier: blokknivåelementer eller et integrert element. Å forstå forskjellen mellom disse to typer elementene er et viktig skritt i å bygge websider.

Blokkere nivåelementer

Så hva er et element på blokknivå? Et blokknivåelement er et HTML-element som begynner en ny linje på en webside og utvider den fulle bredden av det tilgjengelige horisontale rommet til det overordnede elementet. Det skaper store blokker med innhold som avsnitt eller sideinndeling. Faktisk er de fleste HTML-elementer elementer på blokknivå.

Elementer på blokknivå brukes i HTML-dokumentets kropp. De kan inneholde innebygde elementer, så vel som andre elementer på blokknivå.

Inline Elements

I motsetning til et element på blokknivå, et innebygd element:

Det kan begynne innenfor en linje.
Det starter ikke en ny linje.
Bredden strekker seg bare så langt det er definert av kodene.

Et eksempel på et innebygd element er

instagram viewer

, som gjør skrifttypen til tekstinnholdet i fet skrift. Et innebygd element inneholder vanligvis bare andre innebygde elementer, eller det kan ikke inneholde noe som helst
bryte tag.

Det er også en tredje type element i HTML: de som ikke vises i det hele tatt. Disse elementene gir informasjon om siden, men vises ikke når de gjengis i en nettleser.

For eksempel:

definerer metadata.
er HTML-dokumentelementet som inneholder disse elementene.

Bytte inline- og blokkelementtyper

Du kan endre typen av et element fra innebygd til blokk, eller omvendt, ved å bruke en av disse CSS-egenskapene:

```
skjerm: blokk; 
```
```
display: inline; 
```
```
display: ingen;
```

De CSS display property lar deg endre en innebygd eiendom for å blokkere, eller en blokk for å integrere, eller ikke å vise i det hele tatt.

Når skal du vise visningsegenskapen

Generelt sett la skjermegenskapen være i fred, men det er noen tilfeller der bytte av integrerte skjermegenskaper kan være nyttige.

Horisontale menyer: Lister er elementer på blokknivå, men hvis du vil at menyen skal vises horisontalt, må du konvertere listen til et innebygd element slik at hvert menyelement ikke starter på en ny linje.
Overskrifter i teksten: Noen ganger vil du kanskje ha en overskrift i teksten, men opprettholde HTML-toppverdiene. Hvis du endrer h1 til h6-verdiene til innebygd, kan teksten som kommer etter lukkekoden fortsette å flyte ved siden av den på samme linje, i stedet for å starte på en ny linje.
Fjerne elementet: Hvis du vil fjerne et element helt fra dokumentet normal flyt, kan du stille skjermen til
```
ingen
```
Ett notat, vær forsiktig når du bruker skjerm: ingen. Mens den stilen faktisk vil gjøre et usynlig element, vil du aldri bruke dette til å skjule tekst som du la til av SEO-grunner, men ikke vil vise for besøkende. Det er en sikker måte å få nettstedet ditt straffet for en svart hatt-tilnærming til SEO.

Vanlige feilintegrerte elementformateringer

En av de vanligste feilene en nykommer i webdesign gjør er å prøve å sette en bredde på et innebygd element. Dette fungerer ikke fordi innebygde elementbredder ikke er definert av containerboksen.

Inline-elementer ignorerer flere egenskaper:

```
bredde
```
og
```
høyde
```
```
maks bredde
```
og
```
maks-høyde
```
```
min bredde
```
og
```
min høyde
```

Microsoft Internet Explorer (erstattet av Microsoft Edge) har tidligere brukt noen av disse egenskapene feil, selv på innebygde bokser. Dette er ikke standardkrav. Dette er kanskje ikke tilfelle med nyere versjoner av Microsofts nettleser.

Hvis du trenger å definere bredden eller høyden som et element skal ta opp, vil du bruke det på blokknivåelementet som inneholder den innebygde teksten.