I den här handledningen handlar det om två saker: Yttre marginaler och yttre marginaler.
Vi börjar med yttre marginaler. För ett p-element, som är definierat direkt inom body, innebär inställningar för vänster och höger fönstersida avståndet till kanten av body-elementet. Om flera stycken stycken följer varandra, innebär inställningarna för övre och undre yttre marginalen avståndet mellan de enskilda styckena.
Vid definitionen av yttre marginaler och marginaler är det för övrigt möjligt med negativa värden, vilket möjliggör överlappningar.
Ställa in yttre marginal
Yttre marginal och avstånd är den tvingade tomrummet mellan det aktuella elementet och dess föräldra- eller grann-element. Följande CSS-egenskaper är användbara i HTML-element som skapar en egen stycke eller bildar en block.
För margin handlar det om förkortad form av de fyra egenskaperna margin-top, margin-right, margin-bottom och margin-left. Följande värden är möjliga:
• auto – yttre marginalen beräknas automatiskt.
• Procentandel – refererar till elementet för vilket margin har angetts.
• Längdenhet – negativa värden är också tillåtna. Detta möjliggör överlappning av element.
Upp till fyra värden tillåts:
• ett värde – yttre marginal upp, ner, vänster och höger
• två värden – första värdet för yttre marginal upp och ner, andra värdet för yttre marginal höger och vänster
• tre värden – första värdet för yttre marginal upp, andra värdet för yttre marginal vänster och höger, tredje värdet för yttre marginal ner
• fyra värden – första värdet för yttre marginal upp, det andra för höger, det tredje ner och det fjärde vänster.
Följande exempel visar användning av de allmänna margin-egenskaperna:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
background-color: yellow;
}
p.ex {
margin: 30px 50px 30px 50px;
background-color:#FF99FF;
</style>
</head>
<body>
<p>Bygga kamera-rigg</p>
<p class="ex">I den här videoundervisningen lär du dig hur du skapar en kamera-rigg och rör den säkert genom 3D-utrymmet. En projektfil medföljer.</p>
</body>
</html>
I det här exemplet definierades två textstycken.
Till den andra stycket tilldelades även avstånd.
margin: 30px 50px 30px 50px;
Denna angivelse betyder följande:
• 30 pixlar avstånd uppåt
• 50 pixlar avstånd till höger
• 30 pixlar avstånd nedåt
• 50 pixlar avstånd till vänster
Individuella angivelser för marginalerna
Tidigare introducerades den allmänna margin-angivelsen. Men du kan också göra individuella angivelser. Med följande egenskaper kan du bestämma avståndet uppåt, till vänster, nedåt eller till höger för varje sidomarginal hos ett element.
• margin-top – yttre marginal/avstånd uppåt
• margin-right – yttre marginal/avstånd till höger
• margin-bottom – yttre marginal/avstånd nedåt
• margin-left – yttre marginal/avstånd till vänster
För alla fyra egenskaper kan följande värden användas:
• auto – yttre marginalen beräknas automatiskt.
• Procentandel – refererar till elementet för vilket margin- [topp, höger, botten, vänster] angivits.
• Längdenhet – negativa värden är också tillåtna. Detta möjliggör överlappning av element.
Följande exempel visar hur individuella angivelser kan användas effektivt.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>Bygga kamera-rigg</p>
<p class="ex">I den här videoundervisningen lär du dig hur du skapar en kamera-rigg och rör den säkert genom 3D-utrymmet. En projektfil medföljer.</p>
</body>
</html>
I webbläsaren ser resultatet ut som följer:
Ställa in inre marginal
Vid inre marginal handlar det om det tvingade utrymmet mellan innehållet i elementet och dess egna elementkant. Följande CSS-egenskaper är användbara i HTML-element som skapar en egen stycke eller bildar en block.
För padding handlar det om en förkortning av de fyra egenskaperna padding-top, padding-right, padding-bottom och padding-left. Du kan definiera bredden mellan ramen och innehållet i ett element, dvs. den inre marginalen.
• Procentandel – refererar till föräldraelementet.
• Längdenhet
För var och en av de fyra egenskaperna kan du ange upp till fyra värden:
• ett värde – inre marginal upp, ned, vänster och höger
• två värden – första värdet för inre marginal upp och ned, det andra värdet för inre marginal höger och vänster
• tre värden – första värdet för inre marginal upp, det andra värde för inre marginal vänster och höger, det tredje värde för inre marginal ned
• fyra värden – första värde för inre marginal upp, det andra för höger, det tredje ned och det fjärde vänster.
Ett exempel förklarar även detta.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;}
p.ex {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>Bygga kamera-rig</p>
<p class="ex">I den här videoundervisningen lär du dig hur du skapar en kamera-rig och säkert flyttar den genom 3D-rymden. En projektfil ingår.</p>
</body>
</html>Och här är resultatet i webbläsaren:
Genom de fyra padding-egenskaperna kan du definiera interna avstånd. Följande fyra CSS-egenskaper är tillgängliga för detta ändamål:
• padding-top – Avstånd mellan övre kanten av innehållet och övre kanten
• padding-bottom – Avstånd mellan nedre kanten av innehållet och nedre kanten
• padding-left – Avstånd mellan vänstra kanten av innehållet och vänstra kanten
• padding-right – Avstånd mellan högra kanten av innehållet och högra kanten
För alla fyra egenskaper kan följande värden användas:
• Procentandel – relativt till förälderelementet
• Längdangivelse
