Työstäminen CSS-padding-sisennösten kanssa
Oletetaan, että olemme asettaneet tietylle elementille leveyden
100px. CSS:ssä tämä ei suinkaan tarkoita,
että elementin todellinen leveys on
100px. Asia on niin, että
padding:in lisääminen laajentaa elementtiä ja siitä tulee
suurempi kuin mitä on määritelty width-ominaisuudessa.
Katsotaanpa esimerkkiä. Tehdään kaksi
lohkoa, joille asetamme leveyden 100
pikseliä. Samalla asetamme toiselle lohkolle
padding, mutta ensimmäiselle emme. Tuloksena
toinen lohko on suurempi sisennysten verran:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
padding: 25px; /* asetetaan sisennykset */
width: 100px;
height: 100px;
background: #f1f1f1;
}
:
