Summary  
This chapter explains the CSS concept of block-level elements, covering their default `display: block` behavior, how to adjust their width, height, margins, borders and padding, and techniques for centering them within a parent container.

General domain of usage  
Web page layout and styling

**Block-nivå**-element är rektangulära och staplas ovanpå varandra, vilket förhindrar att andra element delar samma rad. Detta beteende styrs av CSS-egenskapen `display: block`.

Viktiga punkter om block-nivåelement:
- De har som standard `display: block`;
- Deras bredd sträcker sig över hela föräldrakontainerns bredd;
- Deras höjd bestäms av innehållet men kan anpassas med CSS;
- De börjar alltid på en ny rad;
- Egenskaper som `border`, `margin`, `padding`, `width` och `height` kan justeras.

Här följer ett exempel där vi manipulerar `width`, `height` och `margin`:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9Im1haW4tYm94Ij4KICAgICAgPGRpdiBjbGFzcz0iZmlyc3QtYm94Ij4xPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9InNlY29uZC1ib3giPjI8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0idGhpcmQtYm94Ij4zPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

Lm1haW4tYm94IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBpbmRpYW5yZWQ7CiAgd2lkdGg6IDEwMHB4OwogIGhlaWdodDogMTAwcHg7Cn0KCi5maXJzdC1ib3ggewogIGJhY2tncm91bmQtY29sb3I6IGRhcmttYWdlbnRhOwogIHdpZHRoOiAzMHB4OwogIGhlaWdodDogNDBweDsKICBtYXJnaW4tbGVmdDogMjBweDsKfQoKLnNlY29uZC1ib3ggewogIGJhY2tncm91bmQtY29sb3I6IHRoaXN0bGU7CiAgd2lkdGg6IDMwcHg7CiAgaGVpZ2h0OiAxNXB4OwogIG1hcmdpbi1sZWZ0OiAzMHB4Owp9CgoudGhpcmQtYm94IHsKICBiYWNrZ3JvdW5kLWNvbG9yOiBvbGl2ZWRyYWI7CiAgd2lkdGg6IDUwcHg7CiAgaGVpZ2h0OiA0NXB4OwogIG1hcmdpbi1sZWZ0OiBhdXRvOwp9

Låt oss undersöka hur ett element kan centreras inuti dess förälder.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9InBhcmVudCI+CiAgICAgIFBhcmVudCBFbGVtZW50CiAgICAgIDxkaXYgY2xhc3M9ImNoaWxkIj5DaGlsZCBFbGVtZW50PC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LnBhcmVudCB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzRGNUU3NzsKICBjb2xvcjogI2ZmZmZmZjsKICB3aWR0aDogMzAwcHg7CiAgaGVpZ2h0OiAxMDBweDsKfQoKLmNoaWxkIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMWUyNjM1OwogIGNvbG9yOiAjZmZmZmZmOwogIHdpZHRoOiA2MHB4OwogIGhlaWdodDogNjBweDsKICAvKiBXZSBjYW4gZ2l2ZSBgYXV0b2AgdmFsdWUgdG8gdGhlIGBtYXJnaW5gIHByb3BlcnR5IHRvIHJlY2VudGVyIHRoZSBlbGVtZW50LiAqLwogIG1hcmdpbi1sZWZ0OiBhdXRvOwogIG1hcmdpbi1yaWdodDogYXV0bzsKfQ==

Behärska grunderna i CSS (Cascading Style Sheets), det stiliseringsspråk som förändrar utseendet och känslan på webbsidor. Utforska kärnkoncept som textstilar, färger, avstånd, boxmodellen, Flexbox och dekorativa effekter. Bygg upp färdigheter för att skapa visuellt tilltalande och välstrukturerade webbsidor. Perfekt för nybörjare som vill skapa en stabil grund i CSS.

Lär dig vad CSS är, hur det kopplas till HTML och hur HTML-element kan stylas med selektorer. Utforska grundläggande koncept som textfärger, användaraktions-pseudoklasser och variabler i CSS.

Utforska hur du kan formatera och utforma text på dina webbsidor. Lär dig att använda anpassade typsnitt och undersök olika typsnittsegenskaper för att förbättra textens utseende.

Lär dig grunderna i boxmodellen, som definierar layout och avstånd för element på en webbsida. Utforska koncept som boxstorlek, tillägg av utrymme till element, arbete med block- och inline-element samt användning av strukturella och funktionella pseudoklasser för avancerad formatering.

Utforska Flexbox, en kraftfull CSS-layoutmetod för att arrangera element i rader och kolumner. Lär dig att kontrollera riktning, justering och avstånd mellan element horisontellt och vertikalt samt anpassa enskilda flexobjekt för precisa layouter.

Lär dig hur du kan förbättra den visuella attraktionskraften på dina webbsidor med CSS. Utforska tekniker för att använda bakgrundsfärger och bakgrundsbilder, formge bilder, använda dekorativa pseudo-element samt lägga till skuggor för att skapa imponerande designer.

Arbete med Blocknivåelement

Awesome!

Arbete med Blocknivåelement