CSS Padding

CSS "padding" omadused määravad tühja ala elemendi ääre ja elemendi sisu ümber

Igale elemendile on võimalik määrata neli erinevat "padding" väärtust. Üleval, paremal, all ja vasakul. Elementide "padding" omaduste väärtusi saab kirjutada, kasutades sentimeetreid (cm.) v. protsente (%).

Näited

   "Padding" omadused ühes deklaratsioonis.
Selles näites demonstreeritakse, kuidas märkida kõik "padding" omadused ühte deklaratsiooni.

  "Top-padding"
Selles näites demonstreeritakse, kuidas tabeli lahtris, elemendi kohale luua tühikut, kasutades cm. väärtust.

  "Top-padding-2"
Selles näites demonstreeritakse, kuidas tabeli lahtris, elemendi kohale luua tühikut, kasutades protsent väärtust.

  "Bottom-padding"
Selles näites demonstreeritakse, kuidas tabeli lahtris, elemendi alla luua tühikut, kasutades cm. väärtust.

  "Bottom-padding-2"
Selles näites demonstreeritakse, kuidas tabeli lahtris, elemendi alla luua tühikut, kasutades protsent väärtust.

  "Left-padding"
Selles näites demonstreeritakse, kuidas tabeli lahtris, elemendi vasakule küljele luua tühikut, kasutades cm. väärtust.

  "Left-padding-2"
Selles näites demonstreeritakse, kuidas tabeli lahtris, elemendi vasakule küljele luua tühikut, kasutades protsent väärtust.

  "Right-padding"
Selles näites demonstreeritakse, kuidas tabeli lahtris, elemendi paremale küljele luua tühikut, kasutades cm. väärtust.

  "Right-padding"
Selles näites demonstreeritakse, kuidas tabeli lahtris, elemendi paremale küljele luua tühikut, kasutades protsent väärtust.

Kasulikud Näpunäited

Brauserites on erinevad "padding" ja "margin" vaikimisi seaded. S.t. kui jäetakse html ja body "padding" ja "margin" määramata siis võib tulemus olla erinev olenevalt brauserist.

Selle probleemi saab lahendada nii, et määratakse html ja body, "padding" ja "margin" väärtuseks null (0):

      html, body {
  margin: 0px;
  padding: 0px;
       }

Nüüd paigutub sinu disain ühtemoodi igas brauseris.

Internet Explorer'is on vaja määrata ka äärise väärtus:

         html, body {
  margin: 0px;
  padding: 0px;
  border: 0px;
}

Kõik html elemendid loovad enda ümber ristküliku kujulise kasti. S.t. et iga element hõlmab veebilehel teatud ala mille sisse ei ole teistel elementidel asja.
Näiteks: mingi element on 10px kõrge siis sellele järgnev element jääb veebilehe ülaservast 10px allapoole.

Css'i abil on siiski võimalik muuta disain veidi paindlikumaks.
Alpool olevas loetelus on Css omadused mis lubavad mõjutada teksti-elemente veebidisainis:

• width
• height
• margin
• margin-top, margin-left, margin-bottom, margin-right
• padding
• padding-top, padding-left, padding-bottom, padding-right

width

Elemendi width (laius) määrab lehekülje vasaku ja parema veeru omavahelise kauguse. Sedasi saab luua erineva suuruse ja kujuga tekstivälju, ilma tabeleid kasutamata.

<p style="width : 150px; border : none; 
background-color : #f0f8ff;">
</p>

See kast on loodud nii, et "width" märgis on lisatud paragrahvi elemendi sisse. Kast ise on 150px lai.

height

Elemendi height (kõrgus) määrab lehekülje ülemise ja alumise veeru omavahelise kauguse. Nii nagu elemendi width puhul saab elemendi heigt puhul luua tabelikujulise elemendi veebidokumenti. Juhul kui teksti font v. ridade arv on kõrgem kui height väärtus siis tekst n.ö. "valgub üle ääre".

<p style="height : 100px; border : none;
background-color : #f0f8ff;&quo5t;>
   See kast on 100px kõrge ja loodud Css'i abil.
</p>

See kast on 50px kõrge ja loodud Css'i abil.

margin

Elemendi "margin" määrab ruumi elemendi ümber. Sedasi saab määrata elemendi kõik küljed korraga või siis ainult ühe külje.

margin : top right bottom left; (IE's kasutatakse margin-top, margin-right, margin-bottom, margin-left).

<p style="border : none; background-color : #f0f8ff; margin : 15px;">
   Selle paragrahvi kõikide külgede margin on 15 px. 
</p>

Selle paragrahvi kõikide külgede margin on 15 px.

padding

Elemendi "padding" määrab ruumi elemendi sees. Sedasi saab määrata elemendi kõik küljed korraga või siis ainult ühe külje.

padding : top right bottom left; (IE's kasutatakse padding-left, padding-top, padding-right, padding-bottom).

<p style="border : none; background-color : #f0f8ff; padding : 15px;">
   Selle paragrahvi kõikide külgede padding on 15 px.
</p>

Selle paragrahvi kõikide külgede padding on 15 px.

Panid kindlasti tähele, et "padding" annab elemendile suurema tausta kui "margin".

Siin on loetelu omadustest milliseid võib kasutada Css'is, teksti kujunamiseks:


Paragrahvi width (laius) width : 100px; border : none; background-color : #f0f8ff;

Paragrahvi height (kõrgus) height : 100px; border : none; background-color : #f0f8ff;

Paragrahvi margin border : none; background-color : #f0f8ff; margin : 15px;

Paragrahvi padding border : none; background-color : #f0f8ff; padding : 15px;

| Koju  | Veebidisain |  Html+Xhtml |  Css |  Javascript |  HTML DOM |  DHTML |  XML |  Sisukord | Mail |
| Windows 7 |