IT TUTORIJALI

CSS - Margine (Margin)

Svojstva CSS margina (border-a)

Svojstvo CSS margine omogućava vam postavljanje razmaka oko granice okvira elementa (ili ruba okvira elementa, ako nema definisanu granicu). Boja pozadine background-color ne utiče na marginu elementa, ona je uvijek prozirna. Međutim, ako nadređeni element ima boju pozadine, on će biti vidljiv kroz njegovo područje margine.

Postavljanje margina za pojedine strane

Možete odrediti margine za pojedinačne strane elementa, poput gornje, desne, donje i lijeve strane, koristeći CSS svojstva margin-top, margin-right, margin-bottom i margin-left. Isprobajmo sljedeći primjer da biste razumjeli kako to funkcioniše:

h1 {
    margin-top: 50px;
    margin-bottom: 100px;
}
p {
    margin-left: 75px;
    margin-right: 75px;
}

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS margin za pojedinačne strane</title>
<style>
    h1 {
        margin-top: 50px;
        margin-bottom: 100px;
        background: yellow;
    }
    p {
        margin-left: 75px;
        margin-right: 75px;
        background: yellow;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim učiti CSS3 uz IT TUTORIJALE.</p>
    <p><strong>Napomena:</strong> Poigrajte se vrijednošću svojstva margine da biste vidjeli kako funkcioniše.</p>
</body>
</html>

Svojstva margine mogu se navesti pomoću sljedećih vrijednosti:

dužina (length) - određuje marginu u px, em, rem, pt, cm itd.
% - navodi marginu u procentima (%) širine elementa koji sadrži.
auto - pretraživač izračunava odgovarajuću marginu za upotrebu.
naslediti (inherit) - specifikuje da margina treba biti nasljeđena od nadređenog elementa.

Takođe možete odrediti negativne margine za element, npr. margina: -10px;, margin: -5%; itd.

Margin - stenografsko svojstvo

Svojstvo margin je stenografsko svojstvo koje služi da bi se izbjeglo postavljanje margine sa svake strane zasebno, tj. margin-top, margin-right, margin-bottom i margin-left. Pogledajmo sljedeći primjer da biste razumjeli kako to u osnovi funkcioniše:

h1 {
    margin: 50px; /* primjeni na sve strane */
}
p {
    margin: 25px 75px; /* vertikalno | horizontalno */
}
div {
    margin: 25px 50px 75px; /* gore | horizontalno | dole */
}
hr {
    margin: 25px 50px 75px 100px; /* gore | desno | dole | lijevo */
}

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavi marginu za sve strane odjednom</title>
<style>
    h1 {
        margin: 50px; /* primijeniti na sve četiri strane */
    }
    p {
        margin: 25px 75px; /* vertikalno | horizontalno */
    }
    div {
        margin: 25px 50px 75px; /* gore | horizontalno | dole */
    }
    hr {
        margin: 25px 50px 75px 100px; /* gore | desno | dole | lijevo*/
    }
    h1, p, div {
        background: yellow;
    }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim učiti CSS3 uz IT TUTORIJALE</p>
    <div>Učenje s nama nije mučenje.</div>
    <hr>
    <p><strong>Napomena:</strong> Poigrajte se vrijednošću svojstva margine da biste vidjeli kako funkcioniše.</p>
</body>
</html>

Ovaj skraćeni zapis može imati jednu, dvije, tri ili četiri vrijednosti razdvojene razmakom.

Ako je navedena jedna vrijednost, primjenjuje se na sve četiri strane.
Ako su navedene dvije vrijednosti, prva se vrijednost primjenjuje na gornju i donju stranu, a druga vrijednost na desnu i lijevu stranu okvira elementa.
Ako su navedene tri vrijednosti, prva se vrijednost primjenjuje na vrh, druga vrijednost primjenjuje se na desnu i lijevu stranu, a zadnja vrijednost na dnu.
Ako su navedene četiri vrijednosti, primjenjuju se na gornju, desnu, donju i lijevu stranu okvira elementa, prema navedenom redosljedu.

Preporučuje se korištenje stenografskih svojstava, jer će vam pomoći da uštedite malo vremena izbjegavajući dodatno kucanje i olakšaće praćenje i održavanje vašeg CSS koda.

Horizontalno centriranje sa automatskim marginama

Automatska auto vrijednost svojstva margine govori web pretraživaču da automatski izračuna marginu. To se obično koristi za horizontalno centriranje elementa u većem prostoru. Isprobajmo sljedeći primjer da biste razumjeli kako to funkcioniše:

div {
    width: 300px;
    background: gray;
    margin: 0 auto;
}

Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Centriranje elementa pomoću CSS automatske (auto) margine</title>
<style>
    .container {
        width: 300px;
        height: 200px;
        background: #ddd;
        margin: 0 auto;
    }
</style>
</head>
<body>
    <div class="container">
        <h1>IT TUTORIJALI</h1>
        <p>Volim učiti CSS3 uz IT TUTORIJALE</p>
    </div>
</body>
</html>

Gore navedena pravila stila omogućavaju elementu <div> da zauzme 300px svih raspoloživih vodoravnih prostora, a preostali prostor će biti podjednako podijeljen između lijeve i desne margine.