Lådor
Innan vi pratar om att positionera våra element på andra sätt än bara rakt över varandra så ska vi kolla på lådor. Varje element i HTML omgärdas av en låda som består av tre delar:
- Margin
- Border
- Padding
Text
I lådan ovanförvisar det silvriga marginalen, det blåa kanten och det röda visar paddingen.
Ändra margin och padding
Om vi vill ändra på marginalerna och paddingen så finns det lite olika sätt:
.enklass{
margin: 10px;
margin-left: 15px;
padding: 5px;
padding-top: 20px;
}Koden ovanför fungerar så här:
margin : 10px- Gör marginalen runt hela elementet till 10px.
margin-left : 15px;- Gör marginalen till vänster om elementet till 15px.
padding : 5px;- Gör paddingen runt hela elementet till 5px.
padding-top- Gör paddingen ovanför elementet till 20px.
Självklart kan du ändra på -bottom och -right också
Border
Vill du lägga till en kantlinje runt ett element kan du skriva så här:
.enklass2{
border: solid;
border-width: 10px;
border-color: green;
}.enklass3{
border: dotted;
border-width: 5px;
}.enklass4{
border: double;
border-radius: 20px;
}.enklass5{
border: dashed;
border-top-right-radius: 20px;
border-top-left-radius: 0px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 100px;
}width & height
Ett elements bredd beror som standard på två saker:
- Storleken på objektet det ligger i
- Om det är ett block- eller ett inline-element
Ett block-element är enkelt sagt ett element som kan innehålla andra element. Exempelvis <div> eller <p>. Ett inline-element innehåller däremot sällan andra element exempelvis <img> och <a>. Ett inline element tar är lika brett som det man ser. Ett block-element däremot går från kant till kant.
För att ändra på bredden på ett element så anger vi:
.enklass6{
border: solid 5px;
width: 250px;
}Du kan också ange bredden som en procent av ytan den har att tillgå:
.enklass7{
border: solid 5px;
width: 50%;
}Höjden ändrar vi med height. Som standard så är höjden bara lagom för att hålla i hela elementet.
.enklass8{
border: solid 5px;
height: 150px;
}Overflow
Om man råkar överfylla en låda, eller om man medvetet gör lådan för liten så kan man styra vad som ska hända med kommandot overflow.
.enklass9{
border: solid 5px;
height: 100px;
width: 100px;
}Här har jag skrivit text som absolut inte for plats i den lilla rutan! Vad i allsin dar ska vi ta oss till?
Som vi ser så har vi fått ett overflow. Det kan vi lösa genom att ange hur overflow ska hanteras i koden:
.enklass9{
border: solid 5px;
height: 100px;
width: 100px;
overflow: hidden;
}Med hidden så kan vi dölja det som inte får plats. Vilket inte alltid är bra.
.enklass9{
border: solid 5px;
height: 100px;
width: 100px;
overflow: scroll;
}Här har jag skrivit text som absolut inte for plats i den lilla rutan! Vad i allsin dar ska vi ta oss till?