<div> je stukturni blok element.
<span> je strukturni linijski element.
Uobičajeni način postavljanja html elemenata na web stranici je za blok elemente jedan ispod drugoga tako da zauzima cijelu širinu roditeljskog elementa.
Linijski elementi se pojavljuju u redoslijedu od lijeva prema desno a prelaze u novi redak ako u tekućem retku ne postoji dostatno prostora.
Značajke blok elemenata:
- Uvijek počinju u novom retku
- Možemo upravljati svojstvima: height, line-height, margin-top i margin-bottom
- Širina elementa je uvijek 100% roditeljskog elementa osim ako je svojstvo width zadano.
Primjeri blok elemenata:
<div>, <p>, <h1>, <form>, <ul> i <li>
Linijskih elementi imaju značajke suprotne od blok elemenata:
- Počinju u istom retku
- Ne možemo mijenjati svojstva: height, line-height, margin-top i margin-bottom
- Širina elementa je uvijek jednaka veličini samog elementa i ne možemo je promijeniti.
Primjeri linijskih elemenata:
<span>, <a>, <img>, <label>, <strong> i <em>
width: 250px;
height: 120px;
Vrijednosti width određuje širinu blok elementa.
Vrijednosti height određuje visinu blok elementa.
Vrijednosti width i height možemo unijeti kao veličinu (npr 250px) ili postotak (npr. 25%).
h2 {
float: right;
}
p
float: left;
}
float element izbacuje pojavljivanje elementa iz redovite strukture i lijepi ga uz lijevi left ili desni right rub:
- roditeljskog elementa
- blok elementa uz isti rub u istom retku
<p>P1</p>
<p class="float">P2</p>
<p class="float">P3</p>
<p class="float">P4</p>
<p class="float">P5</p>
<p>P6</p>
<p>P6</p>
<p>P7</p>
<p>P8</p>
<p>P9</p>
p.float {
float: left;
width: 120px;
height: 200px;
margin: 0px;
background-color: #CCC;
}
p {
font-size: 24px;
padding: 5px;
border: 1px solid red;
height: 100px;
background-color: #EEE;
}
<body>
<div id="wrapper">
<div class="stupac">
<img src="slike/img1.jpg" />
</div>
<div class="stupac">
<img src="slike/img2.jpg" />
</div>
<p>Copyright @mihovil</p>
</div>
</body>
img {
width: 430px;
}
p {
color: #FFF;
padding: 10px;
text-align: center;
}
#wrapper {
width: 1024px;
margin: 0 auto;
background-color: #00F;
}
.stupac {
float: left;
background-color: #FF0;
width: 430px;
margin: 20px;
padding: 20px;
border: 1px solid #000;
}
<body>
<div id="wrapper">
<div id="header">
<img src="slike/naslov.jpg" />
</div>
<div class="stupac">
<img src="slike/img1.jpg" />
</div>
<div class="stupac">
<img src="slike/img2.jpg" />
</div>
<div class="stupac">
<img src="slike/img3.jpg" />
</div>
<p>Copyright @mihovil</p>
</div>
</body>
#header {
background-color: #FF0;
margin: 20px;
padding: 20px;
border: 1px solid rgb(0,0,0);
}
#header img {
width: 940px;
}
.stupac img {
width: 259px;
}


<div class="stupacx3">
<h2>Stupac 1</h2>
<img src="slike/img1.jpg" width="270px" />
<p>Moja draga kuha najbolje.</p>
</div>
<div class="stupacx3">
<h2>Stupac 2</h2>
<img src="slike/img2.jpg" width="270px" />
<p>U mom kraju sad je proljeće.</p>
</div>
<div class="stupacx3">
<h2>Stupac 3</h2>
<img src="slike/img3.jpg" width="270px" />
<p>Najljepše je kad si kraj mene.</p>
</div>
h2 {
color: green;
font-size: 24px;
font-weight: lighter;
text-align: center;
}
p {
font-size: 16px;
text-align: center;
}
.stupacx3 {
float: left;
width: 320px;
}