Model pravokutnika

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?