Ebben a tutorialban két dologról lesz szó: Külső paddingek és külső margók.
Kezdjük az külső paddingekkel. Egy p-elemre, ami direkt a body-ban van definiálva, a bal és jobb ablakszélekre vonatkozó adatok az body-elem külső széleitől mért távolságot jelentik. Ha egymás után következnek az bekezdések, akkor a felső és alsó margók a bekezdések közötti távolságot jelentik.
Egyébként a külső paddingek és margók meghatározásakor negatív értékek is lehetségesek, ami átfedéseket tesz lehetővé.
Külső padding meghatározása
A padding és a margin az erőltetett üres hely az aktuális elem és a szülő vagy szomszédos elem között. A következő CSS tulajdonságok hasznosak azokban az HTML elemekben, amelyek különálló bekezdést hoznak létre vagy blokkot képeznek.
A margin egy rövidített forma a négy tulajdonságnak: margin-top, margin-right, margin-bottom és margin-left. Az alábbi értékek lehetségesek:
• auto – a külső padding automatikusan kiszámítódik.
• Százalék érték – az elemre vonatkozik, amelyhez a margin meg van adva.
• Hosszúság érték – negatív értékek is megengedettek. Ennek segítségével a elemek átfedhetnek egymáson.
Négy érték lehet megadva:
• egy érték – Külső padding fent, lent, balra és jobbra
• két érték – első érték a külső padding fent és lent, a második érték a külső padding jobbra és balra
• három érték – első érték a külső padding fent, a második érték a külső padding balra és jobra, a harmadik érték a külső padding lent
• négy érték – első érték a külső padding fent, a második jobb, a harmadik lent és a negyedik balra.
A következő példa megmutatja az általános margin tulajdonságok használatát:
<!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>Kamera-Rig aufbauen</p>
<p class="ex">In diesem Video-Training erfährst du, wie du ein Kamera-Rig erstellst und dieses sicher durch den 3D-Raum bewegst. Eine Projektdatei liegt bei.</p>
</body>
</html>
Ebben a példában két szövegbekezdés lett definiálva.
A második bekezdéshez margók is hozzá lettek rendelve.
margin: 30px 50px 30px 50px;
Ez az adatsorozat a következőket jelenti:
• 30 pixel margó felfelé
• 50 pixel margó jobbra
• 30 pixel margó lefelé
• 50 pixel margó balra
Egyedi margók meghatározása
Korábban az általános padding megadása volt bemutatva. Azonban lehet egyedi margókat is megadni. Az alábbi tulajdonságok segítségével az elem különböző oldalainak a felső, bal, alsó vagy jobb margója beállítható.
• margin-top – Külső margó/padding fent
• margin-right – Külső margó/padding jobbra
• margin-bottom – Külső margó/padding lefelé
• margin-left – Külső margó/padding balra
Ezeken a négy tulajdonságon az alábbi értékek használhatóak:
• auto – a margó automatikusan kiszámítódik.
• Százalék érték – az elemre vonatkozik, amelyhez a margin- [fent, jobbra, le, bal] meg van adva.
• Hosszúság érték – negatív értékek is megengedettek. Ennek segítségével a elemek átfedhetnek egymáson.
A következő példa mutatja be, hogyan lehet hatékonyan használni az egyedi margókat.
<!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>Kamera-Rig aufbauen</p>
<p class="ex">In diesem Video-Training erfährst du, wie du ein Kamera-Rig erstellst und dieses sicher durch den 3D-Raum bewegst. Eine Projektdatei liegt bei.</p>
</body>
</html>
A böngészőben az eredmény a következőképpen néz ki:
Belső padding meghatározása
A belső padding a tartalom és saját elem margója közötti erőltetett üres hely. A következő CSS tulajdonságok hasznosak azokban az HTML elemekben, amelyek külön bekezdést hoznak létre vagy blokkot képeznek.
A padding egy rövidített forma a négy tulajdonságnak: padding-top, padding-right, padding-bottom és padding-left. Ennek segítségével meg lehet határozni a keret és az elem tartalma közötti távolságot, azaz a belső margót.
• Százalék érték – az ős elemre vonatkozik.
• Hosszúság érték
Közölhetők maximum négy érték:
• egy érték – Belső padding fent, lent, balra és jobbra
• két érték – első érték a belső padding fent és lent, a második érték a belső padding jobbra és balra
• három érték – első érték a belső padding fent, a második érték a belső padding balra és jobbra, a harmadik érték a belső padding lent
• négy érték – első érték a belső padding fent, a második jobb, a harmadik lent és a negyedik balra.
Erre is íme egy példa:
<!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>Kamera-Rig összeállítása</p>
<p class="ex">Ebben a videó tréningben megtudhatod, hogyan hozz létre egy kamera-rig-et és biztonságosan mozgasd át a 3D térben. Egy projekt fájl is mellékelve van.</p>
</body>
</html>És itt van az eredmény a böngészőben:
A belső margókat a négy padding tulajdonság definiálja. Az alábbi négy CSS tulajdonság áll rendelkezésre ehhez a célhoz:
• padding-top – Távolság a tartalom felső szélének és a felső margó között
• padding-bottom – Távolság a tartalom alsó szélének és az alsó margó között
• padding-left – Távolság a tartalom bal szélének és a bal margó között
• padding-right – Távolság a tartalom jobb szélének és a jobb margó között.
Mind a négy tulajdonsághoz a következő értékek használhatók:
• Százalékos érték – az őselemre vonatkozik
• Hosszúsági érték
