Pretty baby spin-doktorer http://1apotekonline.com/cialis/ sterling sølv pille kasse

Vad betyder margin och padding?

Såhär kan man använda margin

Detta lägger samma marginal på alla kanter; till höger, vänster, uppåt och neråt

margin: 10px;

Detta lägger olika marginal på alla kanter (pga att det är olika siffror); till höger, vänster, uppåt och neråt

margin-top: 25px;
margin-bottom: 10px;
margin-left: 20px;
margin-right: 15px;

Och man kan även göra såhär (då räknar den uppåt, vänster, neråt, höger)

margin: 10px 5px 10px 5px;
Såhär kan man använda padding

Detta lägger samma justering på fyllnaden på alla kanter; till höger, vänster, uppåt och neråt

padding: 10px;

Detta lägger olika justering på fyllnaden på alla kanter (pga att det är olika siffror); till höger, vänster, uppåt och neråt

padding-top: 25px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 15px;

Och man kan även göra såhär (då räknar den uppåt, vänster, neråt, höger)

padding: 10px 5px 10px 5px;

Transkribering av filmen:

Vad är margin och padding

I detta avsnitt av css-skolan ska jag förklara margin och padding för er. Margin som kan översättas till marginal justerar marginalen mellan ett element och ett annat. För att ge er ett exempel så kan jag säga att allting inom en css regel justeras av margin.

Vi tar side, alltså menyn, som ett exempel för detta. Om jag justerar margin-top så flyttas hela menyn antingen uppåt eller nedåt. Om jag justerar margin-left flyttar den sig antingen åt höger eller åt vänster. Titta på din css regel och se vad som finns i den. Finns det en bakgrund? Då kommer hela bakgrunden att flytta sig.

Jag visar här ett exempel på om jag skulle flytta hela h3, alltså inläggsrubriken, men hjälp av margin left. Ni ser att även inläggsrubrikens bakgrund flyttar sig. Detta om man inte har en bakgrund vid content eller wrapper. Det kan se annorlunda ut om man har en bakgrund vid content eller wrapper men jag vill visa er så att ni förstår principen.

Padding som man skulle kunna översätta som fyllnaden justerar värdet i en div tag. Vi tar h3, inläggsrubrikerna, som ett exempel även här. Om jag justerar padding h3 i stilmallen, kanske lägger en padding-left: 50px; så är det fyllnaden inom min div-tag, alltså h3 i kodmallen som flyttar på sig. I detta fall så ligger ju inläggsrubriken, eller entry title som det står i kodmallen inom min h3-tagg. Då flyttar sig endast texten eller om jag kanske hade haft en bild inom min tagg i kodmallen och inte bakgrunden. Alltså flyttar sig bara fyllnaden, eller värdet i min tagg och inget annat.

Sammanfattningsvis: Marginalen flyttar hela din css-regel medan padding endast flyttar värdet i din div-tagg, d.v.s. texten, bilden eller liknande. Jag hoppas att tipset hjälpte er lite och att ni nu har större kunskap om margin och padding. Tack så mycket. Hej hej.

Skribent och ansvarig för DDB. Driver Designa din blogg sedan juni 2015. Har bland annat studerat webbdesign, marknadsföring och online strategier både i Sverige och USA. Jobbar inom IT.

Läs mina andra inlägg

1 comment

Lämna ett svar

Din e-postadress kommer inte publiceras.