Skapa din första webbsida – CSS styling

width

width anger bredd för ett element och kan ha ett antal olika värden:

width: auto || nummer+enhet || initial || inherit;
  • auto – standardvärde. Webbläsaren beräknar bredden.
  • %  – anger bredden i procent i förhållande till dess förälder.
  • initial – ställer egenskapen till dess standardvärde.
  • inherit – ärver egenskapen från sin överordnade elementet.

 

height

height anger höjden för elementet, och kan ha samma värden som width:

height: auto || nummer+enhet || initial || inherit;

OBS: height och width egenskaperna omfattar inte padding, gränser, eller marginaler, det sätter höjden på området innanför padding, border, och margin för elementet!

 

Vad är Box Model?

En webbsida delas upp i en så kallad box modell, där man inkluderar kantlinjer, marginaler, padding och innehåll.

Alla HTML-element kan betraktas som boxar, och i CSS använder man termen ”box modell” när man talar om design och layout. Box-modellen är en tänkt låda som sveper runt HTML-element, och den består av: marginaler, kantlinjer, padding och själva innehållet. Box-modellen gör att vi kan definiera utrymmet mellan elementen.

Bilden nedan illustrerar rutan modell:

Diagram över box-modellen
Diagram över box-modellen

De olika delarna är:

innehåll – Innehållet i boxen, där text och bilder placeras och visas.
padding – Rensar ett område mellan innehållet och kantlinjen. padding är osynlig.
border – En kantlinje som går runt paddingen plus innehållet.
margin – Rensar ett område utanför kantlinjen (håller ett avstånd till nästa element). margin är osynlig.

 

padding

Paddingen rensar ett område kring innehåll (innanför kantlinjen) av ett element. Paddingen påverkas av bakgrundsfärgen på elementet.

Toppen, höger, botten och vänster padding kan ändras oberoende av varandra med hjälp av separata fastigheter. En förkortning padding egenskap kan också användas för att ändra alla stoppningar på en gång.

Vi kan använda padding för att skapa lite utrymme mellan kantlinje och innehåll:

p {
    padding-top: 25px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 50px;
}

 

padding: length || procent || inherit;

 

margin

Marginalen anger ett utrymme utanför kantlinjen som är transparent (syns inte).

 

border

Border anger kantlinjerna som är en form av ramar man kan sätta runt element. Vi ska formatera ett div element som har style attribut där vi kan ange CSS kod, och lägga till en streckad röd kantlinje:

<div style=”border-width: 8px;/* bredd */border-style: dashed; /* anger streckad kantlinje */ border-color:red; /* färg */”></div>

 

OBS! Tänk på att du måste ha innehåll i det element som du stylar för att den ska synas.

 

border-style

Det finns ett gäng olika stilar/värden för border-style:

border-style: none; /* Är standardvärde. Anger ingen kantlinje */
border-style: hidden; /* Är samma som "none", utom i gräns konfliktlösning för tabellelement */
border-style: dashed; /* Anger en prickad kantlinje */
border-style: solid; /* Anger en fast kantlinje */
border-style: double; /* Anger en dubbel kantlinje */
border-style: groove; /* Anger en 3D räfflad kant. Effekten beror på border-färgvärde */
border-style: ridge; /* Anger en 3D räfflade kant. Effekten beror på border-färgvärde */
border-style: inset; /* Anger en 3D infälld gräns. Effekten beror på border-färgvärde */
border-style: outset; /* Anger en 3D början gräns. Effekten beror på border-färgvärde */
border-style: initial; /* Ställer denna egendom till dess standardvärde. Läs om inledande */
border-style: inherit; /* Ärver egenskapen från sin överordnade elementet. */

 

 

border-width

Border-width egenskapen sätter bredden för alla fyra sidor och kan ha en till fyra värden.

/* Exempel: */

border-width: 1px medium thick 10px;
top border - blir 1px
right border - blir medium
bottom border - blir thick
left border - blir 10px

border-width: thin 5px 1px;
top border - blir thin
right & left border - blir 5px
bottom border - blir 1px

border-width: 1px 5px;
top & bottom border - blir 1px
right & left border - blir 5px

border-width: thin;
alla fyra border - blir thin

 

 

 

Bredd och höjd för ett element

Man anger bredd med width och höjd med height. För att ställa in bredd och höjd på ett element så att ser korrekt ut i alla webbläsare, måste du veta hur box-modellen fungerar.

Obs Viktigt: När du ställer in width och height i ett element med CSS gör du det bara på innehållsområdet, men för att beräkna full storlek för ett element måste du även lägga till padding, kantlinjer och marginaler.

Låt oss skapa ett div-element med en total bredd på 500px:

div {
    width: 470px;
    padding: 10px; /* anger adding 10px på alla sidor */
    border: 5px solid gray;
    margin: 0; 
}

Skapa din första webbsida – CSS styling

Lämna ett svar

E-postadressen publiceras inte. Obligatoriska fält är märkta *

Gå till toppen