Skillnaderna mellan blocknivå och inbyggda element

HTML består av olika element som fungerar som byggstenar för webbsidor. Var och en av dessa element faller i en av två kategorier: element på blocknivå eller ett inbyggt element. Att förstå skillnaden mellan dessa två typer av element är ett viktigt steg i att bygga webbsidor.

Blockera nivåelement

Så vad är ett element på blocknivå? Ett blocknivåelement är ett HTML-element som börjar en ny rad på en webbsida och utökar hela bredden på det tillgängliga horisontella utrymmet i dess överordnade element. Det skapar stora innehållsblock som stycken eller siddelningar. Faktum är att de flesta HTML-element är element på blocknivå.

Element på blocknivå används i HTML-dokumentets kropp. De kan innehålla inbyggda element, liksom andra element på blocknivå.

Inline Elements

Till skillnad från ett blocknivåelement, ett inbyggt element:

Det kan börja inom en rad.
Det startar inte en ny rad.
Dess bredd sträcker sig bara så långt det definieras av dess taggar.

Ett exempel på ett inbyggt element är

instagram viewer

, vilket gör teckensnittet för textinnehållet i fetstil. Ett inbyggt element innehåller vanligtvis bara andra inbyggda element, eller så kan det inte innehålla någonting alls, till exempel
bryta taggen.

Det finns också en tredje typ av element i HTML: de som inte visas alls. Dessa element ger information om sidan men visas inte när de återges i en webbläsare.

Till exempel:

definierar metadata.
är HTML-dokumentelementet som innehåller dessa element.

Byta inline- och blockelementtyper

Du kan ändra typ av ett element från inline till block, eller vice versa, med en av dessa CSS-egenskaper:

```
display: blockera; 
```
```
display: inline; 
```
```
display: ingen;
```

De CSS display-egenskap låter dig ändra en inline-egenskap för att blockera, eller ett block till inline, eller inte att visa alls.

När ska du ändra visningsegenskapen

I allmänhet lämna visningsegenskapen i fred, men det finns vissa fall där bytande av inline- och blockeringsegenskaper kan vara användbart.

Horisontella listmenyer: Listor är element på blocknivå, men om du vill att din meny ska visas horisontellt måste du konvertera listan till ett inbyggt element så att varje menyalternativ inte börjar på en ny rad.
Rubriker i texten: Ibland kanske du vill att en rubrik ska finnas kvar i texten, men behålla HTML-rubrikvärdena. Om du ändrar h1 till h6-värdena till inline kan texten som kommer efter stängningstaggen fortsätta att flöda bredvid den på samma rad, istället för att börja på en ny rad.
Ta bort elementet: Om du vill ta bort ett element helt från dokumentet normalt flöde, kan du ställa in skärmen till
```
ingen
```
En anteckning, var försiktig när du använder display: ingen. Även om den stilen faktiskt kommer att göra ett element osynligt, vill du aldrig använda detta för att dölja text som du har lagt till av SEO-skäl, men inte vill visa för besökare. Det är ett säkert sätt att få din webbplats straffad för en svart hatt för SEO.

Vanliga inbyggda elementformateringsfel

Ett av de vanligaste misstagen som en nykomling till webbdesign gör är att försöka ställa in en bredd på ett inbyggt element. Detta fungerar inte eftersom bredden på inbyggda element inte definieras av behållarboxen.

Inbyggda element ignorerar flera egenskaper:

```
bredd
```
och
```
höjd
```
```
maximal bredd
```
och
```
maximal höjd
```
```
min bredd
```
och
```
min höjd
```

Microsoft Internet Explorer (ersatt av Microsoft Edge) har tidigare felaktigt tillämpat några av dessa egenskaper även på inbyggda rutor. Detta överensstämmer inte med standarderna. Detta kanske inte är fallet med nyare versioner av Microsofts webbläsare.

Om du behöver definiera bredden eller höjden som ett element ska ta upp, vill du tillämpa det på blocknivåelementet som innehåller din inbyggda text.