Embedded Files
CSS margine su ključni deo stilizacije web stranica, omogućavajući kreiranje prostora oko elemenata. One definišu spoljašnji razmak elementa od drugih elemenata na stranici. Marginama se upravlja pomoću CSS svojstva `margin`.
## Osnovne informacije o marginama
Marginama se može pristupiti na nekoliko načina:
1. **Jednostruka margina**:
- `margin: 20px;` - postavlja marginu od 20 piksela na sve četiri strane elementa.
2. **Margine po strani**:
- `margin-top: 20px;` - postavlja marginu od 20 piksela na vrhu.
- `margin-right: 15px;` - postavlja marginu od 15 piksela na desnoj strani.
- `margin-bottom: 10px;` - postavlja marginu od 10 piksela na dnu.
- `margin-left: 5px;` - postavlja marginu od 5 piksela na levoj strani.
3. **Kombinovana sintaksa**:
- `margin: 10px 20px;` - postavlja vertikalne margine (gore i dole) na 10 piksela i horizontalne margine (levo i desno) na 20 piksela.
- `margin: 5px 10px 15px;` - postavlja gornju marginu na 5 piksela, horizontalne margine na 10 piksela, a donju marginu na 15 piksela.
- `margin: 5px 10px 15px 20px;` - postavlja gornju marginu na 5 piksela, desnu marginu na 10 piksela, donju marginu na 15 piksela i levu marginu na 20 piksela.
## Automatske margine
Svojstvo `margin` može koristiti vrednost `auto` za centriranje elemenata horizontalno unutar njihovog roditeljskog kontejnera:
```css
.element {
width: 50%;
margin: 0 auto;
}
```
U ovom primeru, element će biti centriran horizontalno jer su leve i desne margine automatski postavljene da zauzmu jednak prostor.
## Negativne margine
CSS omogućava korišćenje negativnih vrednosti za margine, što može biti korisno za preklapanje elemenata:
```css
.element {
margin-top: -10px;
}
```
## Shorthand sintaksa
Shorthand (skraćena) sintaksa omogućava efikasno postavljanje margina za sve četiri strane elementa u jednoj liniji koda:
```css
.element {
margin: 10px 20px 30px 40px; /* redosled: top, right, bottom, left */
}
```
## Razlika između margina i paddinga
Važno je razlikovati margine od paddinga. Margine kreiraju razmak spolja oko elementa, dok padding kreira razmak unutar elementa, između sadržaja i ivica elementa.
## Primer
Evo jednostavnog primera koji ilustruje upotrebu margina u HTML i CSS kodu:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Margins Example</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 20px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
```
U ovom primeru, plavi kvadrat će imati razmak od 20 piksela sa svih strana zahvaljujući svojstvu `margin: 20px;`.
Razumevanje i pravilna upotreba margina omogućavaju dizajnerima i developerima da precizno upravljaju rasporedom i estetikom web stranica, stvarajući vizuelno privlačne i funkcionalne dizajne.
Page updated
Google Sites
Report abuse