Display-ominaisuuden käyttö CSS:ssä
Tiedät jo, että kaikki tagit kuuluvat tiettyyn
lohkomalliin. Halutessasi voit kuitenkin
vaihtaa mallia display-ominaisuuden avulla.
Ominaisuuden arvolla block
voit tehdä elementistä lohkomallisen, ja
arvolla inline - rivimallisen.
Tehdään niin, että span-tagit
käyttäytyvät kuin lohkoelementit:
<span>text</span>
<span>text</span>
<span>text</span>
span {
display: block;
width: 100px;
height: 100px;
border: 1px solid red;
margin-bottom: 20px;
}
:
Ja nyt tehdään niin, että div-tagit
käyttäytyvät kuin rivielementit:
<div>text</div>
<div>text</div>
<div>text</div>
div {
display: inline;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
Olkoon HTML-koodissasi useita kappaleita. Tee niin, että ne käyttäytyvät kuin rivielementit.
Olkoon HTML-koodissasi useita linkkejä. Tee niin, että ne käyttäytyvät kuin lohkoelementit. Aseta niille reunus, leveys ja korkeus.
