Model pravokutnika

Određivanje sve četiri stranice margine i odmaka (engl. padding)

  margin: 10px;
  margin: 10px 20px;
  margin: 10px 20px 30px;
  margin: 10px 20px 30px 15px;

  padding: 10px;
  padding: 10px 20px;
  padding: 10px 20px 30px;
  padding: 10px 20px 30px 15px;

padding: 10px;


Sva četiri odmaka (gornji, desni, donji i lijevi) imaju vrijednost 10px;

padding: 10px 20px;


Gornji i donji odmak (padding) imaju vrijednost 10px
Desni i lijevi odmak (padding) imaju vrijednost 20px

padding: 10px 20px 30px;


Gornji odmak (padding) ima vrijednost 10px
Desni i lijevi odmak (padding) imaju vrijednost 20px
Donji odmak (padding) ima vrijednost 30px

padding: 10px 20px 30px 15px;

Gornji odmak (padding) ima vrijednost 10px
Desni odmak (padding) ima vrijednost 20px
Donji odmak (padding) ima vrijednost 30px
Lijevi odmak (padding) ima vrijednost 15px

margin: 10px;

Sva četiri margine (gornja, desna, donja i lijeva) imaju vrijednost 10px;

margin: 10px 20px;

Gornja i donja margina imaju vrijednost 10px
Desna i lijeva margina imaju vrijednost 20px

margin: 10px 20px 30px;

Gornja margina ima vrijednost 10px
Desna i lijeva margina imaju vrijednost 20px
Donja margina ima vrijednost 30px

margin: 10px 20px 30px 15px;


Gornja margina ima vrijednost 10px
Desna margina ima vrijednost 20px
Donja margina ima vrijednost 30px
Lijeva margina ima vrijednost 15px

Određivanje samo jedne stranice margine i odmaka (engl. padding)

margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 15px;

  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 15px;

Border width, style i color sve četiri stranice

border-width: 1px;

  border-color: yellow;
  border-color: #FF0;
  
  border-style: solid;
  border-style: dotted;
  border-style: dashed;
  border-style: groove;
  border-style: double;

Border samo jedne stranice


Određivanje svojstava samo jednog obruba:
  border-top: 1px solid gold;
  border-right: 3px dotted silver;
  border-bottom: 2px dashed indigo;
  border-left: 4px double olive;

Određivanje svojstava sva četiri obruba:
  border: 1em solid green;

Primjer 1: model pravokutnika

<body>
<div id="header">
    <h1>Moja web stranica</h1>
    <h2>Popis vježbi</h2>
    <p class="prva">Lorem ipsum</p>
    <p>Lorem ipsum generator</p>
</div>
<div id="footer">
    <h2>Popis imena</h2>
    <ol>
        <li class="prva">Petar</li>
        <li>Ivan</li>
        <li>Andrija</li>
    </ol>
</div>
</body>

Primjer 1: stil.css

body {
  padding: 40px;
  background-color: lightgrey;
}
#header {
  margin: 0 50px;
  padding: 20px;
  background-color: yellow;
  border: 1px solid black;
} 
h1 {
  color: blue;
  background-color: lightgrey;
  margin: 40px 40px 10px;
  padding: 20px;
}

Hvala na pozornosti!

Pitanja?

← →