abc HTML5 i CSS TUTORIAL

Margine /MARGINS/ { margin: }


Sllika 1. Izbor vrijednosti atributa - Eksterni CSS /EXTERNAL CSS/

Margine /MARGINS/ { margin: }

Sintaksa:

  • CSS fajl: TAG {margin:Vrijednost; | margin-top: Vrijednost; margin-right: Vrijednost; margin-bottom: Vrijednost; margin-left: Vrijednost;}
  • HTML FAJL - HEAD dio: <link rel="stylesheet" type="text/css" href="Putanja/ImeCssFajla.css">
  • HTML FAJL - BODY dio: <TAG>Sadržaj</TAG>

Margine su bjelina oko HTML dokumenta.

Oznake:
TAG - p | h1 | h2 | h3 | h4 | h5 | h6 | BODY | DIV - TAG može da primi jednu od navedenih vrijednosti
p paragraf /PARAGRAPH/
h1 | h2 | h3 | h4 | h5 | h6 - zaglalje teksta /HEADINGS/
BODY - Tekst u cijelom dokumentu
DIV - Tekst u cijeloj DIV sekciji

margin - Atribut za veličinu fonta za cijeli dokument
Pojedinačne margine:
margin-top: Margina vrha;
margin-right: - Desna margina;
margin-bottom: Margina dna;
margin-left: Lijeva margina;
Vrijednost - Brojna vrijednost u pikselima (px).


Slika 2. Margine /MARGINS/

Primjer 1. Margine veličine 35 px oko paragrafa. Radi boljeg pregleda korišten je i atribut border ( border: 1px solid black;).

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

<!DOCTYPE html>
<html>
<head> <title>Margine paragrafa</title>
<style>
  p {margin: 35px;}
</style>
</head>
<body>
<h2>Naslov poglavlja</h2>
<p>Margine 35 piksela oko teksta. Margine 35 piksela oko teksta. Margine 35 piksela oko teksta. Margine 35 piksela oko teksta.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head> <title>Margine paragrafa</title>
<link rel=stylesheet href="css/10_MARGIN_paragraph35.css" type="text/css">
</head>
<body>
<h2>Naslov poglavlja</h2>
<p>Margine 35 piksela oko teksta. Margine 35 piksela oko teksta. Margine 35 piksela oko teksta. Margine 35 piksela oko teksta.</p>
</body></html>

Fajl: 10_MARGIN_paragraph35.css

p {
margin: 35px;
}

Primjer 2. Margine veličine 5 px oko paragrafa. Radi boljeg pregleda korišten je i atribut border ( border: 1px solid black; ).
Opis rješenja: Svaka margina ima svoje ime (margin-top: 10px; margin-right: 15px; margin-bottom: 20px; margin-left: 15px;)

Interni CSS (CSS u HTML fajlu)

html5 fajl

.css (Eksterni CSS fajl)

Ispis na ekranu

<!DOCTYPE html>
<html>
<head> <title>Margine različite - Bjelina oko teksta</title>
<style>
  p {margin-top: 10px;
    margin-right: 35px;
    margin-bottom: 20px;
    margin-left: 15px;}
</style>
</head>
<body>
<h2>Naslov poglavlja</h2>
<p >Različite marigne za ovaj dokument. Različite marigne za ovaj dokument. Različite marigne za ovaj dokument. Različite marigne za ovaj dokument.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head> <title>Margine različite - Bjelina oko teksta</title>
<link rel=stylesheet href="css/10_MARGIN_paragraph_different_01.css" type="text/css">
</head>
<body>
<h2>Naslov poglavlja</h2>
<p >Različite marigne za ovaj dokument. Različite marigne za ovaj dokument. Različite marigne za ovaj dokument. Različite marigne za ovaj dokument.</p>
</body>
</body></html>

Fajl: 10_MARGIN_paragraph_different_01.css

p {
margin: 35px;
}

Prozor na dnu stranice je namjenje za provjeru koda:
- kopirajte kod (edit, copy, paste ili CTRL+C, CTRL+V ili DRAG&DROP metodom), editovanje je moguće u prozoru

Index