CSS referencia => Doboztulajdonságok

5.5 Doboz-tulajdonságok

A doboz-tulajdonságok az elemeket reprezentáló dobozok méretét, kerületét és helyzetét állítják be. A doboztulajdonságok használatához lásd a 4. Fejezetet.

A margó-tulajdonságok állítják be az elemhez tartozó margókat. A margin tulajdonság minden oldalra vonatkozik, míg a többi margó-tulajdonság csak csak a saját margóikra van hatással.

A kitöltés-tulajdonságok írják le, mekkora hely legyen a szegély és az elem tartalma között. A padding tulajdonság minden oldalra vonatkozik, míg a többi kitöltés-tulajdonság csak csak a saját oldalon lévő kitöltésre van hatással.

A szegély-tulajdonságok állítják be az elemhez tartozó szegélyeket. Minden elemnek négy szegélye van, minden oldalon egy-egy, amelyek szélességükkel, színükkel, stílusukkal vannak leírva.

A width és height tulajdonságok állítják be a doboz méretét; a float és clear tulajdonságok az elem pozícióját változtathatják.

Vissza a hivatkozó oldalra

5.5.1 'margin-top'

Értéke lehet: hossz | százalékos | auto
Alapértelmezés: 0
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Viszonyítási alap a legközelebbi blokkszintű szülőelem

Ez a tulajdonság állítja be az elem fölső margóját:

H1 { margin-top: 2em }

Negatív érték használata engedélyezett, de lehetnek megvalósításbeli korlátozások.

Vissza a hivatkozó oldalra

5.5.2 'margin-right'

Értéke lehet: hossz | százalékos | auto
Alapértelmezés: 0
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Viszonyítási alap a legközelebbi blokkszintű szülőelem

Ez a tulajdonság állítja be az elem jobb oldali margóját:

H1 { margin-right: 2em }

Negatív érték használata engedélyezett, de lehetnek megvalósításbeli korlátozások.

Vissza a hivatkozó oldalra

5.5.3 'margin-bottom'

Értéke lehet: hossz | százalékos | auto
Alapértelmezés: 0
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Viszonyítási alap a legközelebbi blokkszintű szülőelem

Ez a tulajdonság állítja be az elem alsó margóját:

H1 { margin-bottom: 2em }

Negatív érték használata engedélyezett, de lehetnek megvalósításbeli korlátozások.

Vissza a hivatkozó oldalra

5.5.4 'margin-left'

Értéke lehet: hossz | százalékos | auto
Alapértelmezés: 0
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Viszonyítási alap a legközelebbi blokkszintű szülőelem

Ez a tulajdonság állítja be az bal oldali margóját:

H1 { margin-left: 2em }

Negatív érték használata engedélyezett, de lehetnek megvalósításbeli korlátozások.

Vissza a hivatkozó oldalra

5.5.5 'margin'

Értéke lehet: [hossz | százalékos | auto]{1,4}
Alapértelmezés: Nincs definiálva
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Viszonyítási alap a legközelebbi blokkszintű szülőelem

A margin tulajdonság egy 'gyorstulajdonság', amelynek segítségével egy deklaráción belül állítható be a margin-top, margin-right, margin-bottom és a margin-left tulajdonság értéke.

Ha értékként négy számértéket adunk meg, annak érteélemzési sorrendje mindig a felső => jobb alsó => bal. Ha csak egy érték van megadva, az mind a négy oldalra vonatkozik, ha kettő, vagy három: a szemben lévő értékek meg fognak egyezni. 

BODY { margin: 2em } 
BODY { margin: 1 em 2em } 
BODY { margin: 1em 2em 3em }

Fenti példák közül a legalsó -hatását tekintve- a következővel megegyezik:

BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2 em;   /* megegyezik a szembeni oldal értékével */
}

Negatív margó-értékek engedélyezettek, de lehetnek megvalósításbeli korlátozások.

Példa

Vissza a hivatkozó oldalra

5.5.6 'padding-top'

Értéke lehet: hossz | százalékos
Alapértelmezés: 0
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Viszonyítási alap a legközelebbi blokkszintű szülőelem

Ez a tulajdonság állítja be egy elem fölső kitöltését

BLOCKQUOTE { padding-top: 0,3em }

Negatív kitöltés-érték nem megengedett.

Vissza a hivatkozó oldalra

5.5.7 'padding-right'

Értéke lehet: hossz | százalékos
Alapértelmezés: 0
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Viszonyítási alap a legközelebbi blokkszintű szülőelem.

Ez a tulajdonság állítja be egy elem jobb oldali kitöltését

BLOCKQUOTE { padding-right: 0,3em }

Negatív kitöltés-érték nem megengedett.

Vissza a hivatkozó oldalra

5.5.8 'padding-bottom'

Értéke lehet: hossz | százalékos
Alapértelmezés: 0
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Viszonyítási alap a legközelebbi blokkszintű szülőelem

Ez a tulajdonság állítja be egy elem alsó kitöltését

BLOCKQUOTE { padding-bottom: 0,3em }

Negatív kitöltés-érték nem megengedett.

Vissza a hivatkozó oldalra

5.5.9 'padding-left'

Értéke lehet: hossz | százalékos
Alapértelmezés: 0
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Viszonyítási alap a legközelebbi blokkszintű szülőelem

Ez a tulajdonság állítja be egy elem bal oldali kitöltését

BLOCKQUOTE { padding-left: 0,3em }

Negatív kitöltés-érték nem megengedett.

Vissza a hivatkozó oldalra

5.5.10 'padding'

Értéke lehet: [hossz | százalékos]{1,4}
Alapértelmezés: Nincs definiálva
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Viszonyítási alap a legközelebbi blokkszintű szülőelem

A padding tulajdonság egy 'gyorstulajdonság', amelynek segítségével egy deklaráción belül állítható be a padding-top, padding-right, padding-bottom és a padding-left tulajdonság értéke.

Ha értékként négy számértéket adunk meg, annak érteélemzési sorrendje mindig a felső => jobb alsó => bal. Ha csak egy érték van megadva, az mind a négy oldalra vonatkozik, ha kettő, vagy három: a szemben lévő értékek meg fognak egyezni.

A kitöltőfelület megadása a background tulajdonsággal: 

H1 {
background: white;
padding: 1em 2em;
}

Fenti példa 1em értékű kitöltést állít be függőlegesen (fent és lent), és 2em értékű kitöltést állít be vízszintesen (jobb- és baloldalt). AZ em érték magyarul a -szorosnak felel meg. Viszonyítási alapja az elem fontmérete. Az 1em (egyszeres) megegyezik a használt font magaságával.

A kitöltési értékek nem lehetnek negatívak.

Példa

Vissza a hivatkozó oldalra

5.5.11 'border-top-width'

Értéke lehet: thin | medium | thick | hossz
Alapértelmezés: medium
Alkalmazható: Minden elemhez
Öröklődik: Nem
Százalékos értékek: Nincs értelmezve

Ez a tulajdonság állítja be egy elem fölső szegélyét. A kulcsszavakhoz tartozó tényleges értékek böngészőfüggők, de a következő sorrend mindenképpen érvényben marad:
thin (vékony) « medium (közepes) « thick (vastag) 

H1 { border: solid thick red }
P  { border: solid thick blue }

A fenti példa szerint a H1 és a P elemek ugyanolyan szegélyt kapnak, függetlenül a fonmérettől. Relatív szélesség eléréséhez az em használható:

H1 { border: solid 0,5em } 


      
A szegélyszélességek nem kaphatnak negatív értéket.

      
Vissza a 
      hivatkozó oldalra 

      
5.5.12 'border-right-width'

      
Értéke lehet: thin | medium | 
      thick | hossz
Alapértelmezés: 
      medium
Alkalmazható: Minden 
      elemhez
Öröklődik: Nem
Százalékos értékek: Nincs 
      értelmezve

      
Ez a tulajdonság állítja be egy elem jobb oldali szegélyét. Használata 
      megegyezik a border-top-width 
      tulajdonság használatával. 

      
Vissza a 
      hivatkozó oldalra 

      
5.5.13 'border-bottom-width'

      
Értéke lehet: thin | medium | 
      thick | hossz
Alapértelmezés: 
      medium
Alkalmazható: Minden 
      elemhez
Öröklődik: Nem
Százalékos értékek: Nincs 
      értelmezve

      
Ez a tulajdonság állítja be egy elem alsó szegélyét. Használata 
      megegyezik a border-top-width 
      tulajdonság használatával. 

      
Vissza a 
      hivatkozó oldalra 

      
5.5.14 'border-left-width'

      
Értéke lehet: thin | medium | 
      thick | hossz
Alapértelmezés: 
      medium
Alkalmazható: Minden 
      elemhez
Öröklődik: Nem
Százalékos értékek: Nincs 
      értelmezve

      
Ez a tulajdonság állítja be egy elem bal oldali szegélyét. Használata 
      megegyezik a border-top-width 
      tulajdonság használatával. 

      
Vissza a 
      hivatkozó oldalra 

      
5.5.15 'border-width'

      
Értéke lehet: [thin | medium | 
      thick | hossz]{1,4}
Alapértelmezés: Nincs 
      definiálva
Alkalmazható: Minden elemhez
Öröklődik: 
      Nem
Százalékos értékek: Nincs értelmezve

      
A border-width tulajdonság egy 'gyorstulajdonság', 
      amelynek segítségével egy deklaráción belül állítható be a 
      border-width-top, border-width-right, 
      border-width-bottom és a border-width-left 
      tulajdonság értéke. 

      
Négy értéke lehet, a következő értelmezésban: 

      
    
        
  • Egy megadott érték: - Mind a négy szegély a megadott 
        értéket kapja; 
        
  • Két megadott érték: - Az első érték a fölső és alsó 
        szegélyekre, a második érték a bal ésa jobb szegélyre vonatkozik; 
        
  • Három megadott érték: - Az első érték a fölső, a második a 
        jobb és bal, a harmadik az alsó szegélyre vonatkozik; 
        
  • Négy megadott érték: - Fölső, jobb, alsó és bal oldali 
        szegélyekre vonatkozik, a felsorolás sorrendjében. 

      
A következő példában a megjegyzésben írt értékek jelzik a szegélyek 
      vastagságát: 
H1 {border-width: thin } /* thin thin thin thin */
                            H1 {border-width: thin thick } /* thin thick thin thick */
                            H1 {border-width: thin thick medium } /* thin thick medium thin */
                            H1 {border-width: thin thick medium thin } /* thin thick medium thin */


      
A szegélyek szélessége nem vehet fel negatív értéket. 

      
Példa

      

      

      

        
 
 
      

      
Vissza a 
      hivatkozó oldalra 

      
5.5.16 'border-color'

      
Értéke lehet: szín{1,4}
Alapértelmezés: A 
      color tulajdonság értéke
Alkalmazható: Minden 
      elemhez
Öröklődik: Nem
Százalékos értékek: Nincs 
      értelmezve

      
A border-color tulajdonság a négy szegély színét állítja 
      be. Négy értéke lehet, az értékek a különböző oldalak színeit állítják be, 
      ahogyan azt a border-widthtulajdonságnál 
      leírtuk. 

      
Ha nincs színérték meghatározva, helyét az elem color 
      tulajdonsága veszi át. 
P {
                            color: black;
                            background: white;
                            border: solid
                            }


      
Fenti példában az elem szegélye vékony, fekete vonal lesz. 

      
Vissza a 
      hivatkozó oldalra 

      
5.5.17 'border-style'

      
Értéke lehet: 
      
none|dotted|dashed|solid|double|groove|ridge|inset|outset
Alapértelmezés: 
      none
Alkalmazható: Minden 
      elemhez
Öröklődik: Nem
Százalékos értékek: Nincs 
      értelmezve

      
A border-style tulajdonság állítja be a négy szegély 
      stílusát. Négy értéke lehet, az értékek a különböző oldalak színeit 
      állítják be, ahogyan azt a border-width 
      tulajdonságnál leírtuk. 
#b14 { border-style: solid dotted }


      
Fenti példa szerint a vízszintes szegélyek stílusa solid, 
      a függőleges szegélyeké pedig dotted (pontvonal) lesz. 
      
Mivel a szegélystílusok alapértelmezés szerinti beállítása 
      none, külön beállított értékek nélkül az elemeknek nem lesz 
      látható szegélye. 

      
A szegélystílusok a következőket jelentik:

      
    
        
  • none - Nincs kirajzolt szegély (tekintet nélkül a 
        border-width tulajdoság értékére); 
        
  • dotted - A szegély pontozott vonallal lesz kirajzolva 
        az elem hátterére; 
        
  • dashed - A szegély szaggatott vonallal lesz kirajzolva 
        az elem hátterére; 
        
  • solid - A szegély folytonos vonallal lesz kirajzolva az 
        elem hátterére; 
        
  • double - A szegély kettős vonallal lesz kirajzolva az 
        elem hátterére. A két vonal összes szélessége és a köztük levő köz 
        megegyezik a border-width értékével; 
        
  • groove - A szegély 3D süllyesztett hatást keltve lesz 
        kirajzolva; 
        
  • ridge - A szegély 3D domború hatást keltve lesz 
        kirajzolva 
        
  • inset - A szegély 3D beékelt stílust keltve lesz 
        kirajzolva; 
        
  • outset - A szegély 3D kiemelt hatást keltve lesz 
        kirajzolva; 

      
Példa

      

      

      

        
 
 
      

      
Vissza a 
      hivatkozó oldalra 

      
5.5.18 'border-top'

      
Értéke 
      lehet:border-top-width||border-style||szín
Alapértelmezés: 
      Nincs meghatározva
Alkalmazható: Minden 
      elemhez
Öröklődik: Nem
Százalékos értékek: Nincs 
      értelmezve

      
Ez a 'gyorstulajdonság' egy elem fölső szegélye szélességének, 
      stílusának és színének beállítására szolgál. 
H1 { border-top: thick solid red }


      
Fenti péda a H1 elem fölső szegélynek vastagságát, 
      vonaltípusát és színét állítja be. A felsorolásból kihagyott értékek 
      alapértelmezésükkel lesznek helyettesítve. 
H1 { border-top: thick solid }


      
Mivel ebben a példában a szín nem szerepel, a szegély színe megegyezik 
      az elem szegélyének színével. 

      
Vissza a 
      hivatkozó oldalra 

      
5.5.19 'border-right'

      
Értéke 
      lehet:border-top-width||border-style||szín
Alapértelmezés: 
      Nincs meghatározva
Alkalmazható: Minden 
      elemhez
Öröklődik: Nem
Százalékos értékek: Nincs 
      értelmezve

      
Ez a 'gyorstulajdonság' egy elem jobb oldali szegélye szélességének, 
      stílusának és színének beállítására szolgál. Használata megegyezik a border-top 
      tulajdonságéval. 

      
Vissza a 
      hivatkozó oldalra 

      
5.5.20 'border-bottom'

      
Értéke lehet: 
      border-top-width||border-style||szín
Alapértelmezés: 
      Nincs meghatározva
Alkalmazható: Minden 
      elemhez
Öröklődik: Nem
Százalékos értékek: Nincs 
      értelmezve

      
Ez a 'gyorstulajdonság' egy elem alsó szegélye szélességének, 
      stílusának és színének beállítására szolgál. Használata megegyezik a border-top 
      tulajdonságéval. 

      
Vissza a 
      hivatkozó oldalra 

      
5.5.21 'border-left'

      
Értéke lehet: 
      border-top-width||border-style||szín
Alapértelmezés: 
      Nincs meghatározva
Alkalmazható: Minden 
      elemhez
Öröklődik: Nem
Százalékos értékek: Nincs 
      értelmezve

      
Ez a 'gyorstulajdonság' egy elem bal oldali szegélye szélességének, 
      stílusának és színének beállítására szolgál. Használata megegyezik a border-top 
      tulajdonságéval. 

      
Vissza a 
      hivatkozó oldalra 

      
5.5.22 'border'

      
Értéke lehet: 
      border-width||border-style||szín
Alapértelmezés: 
      Nincs meghatározva
Alkalmazható: Minden 
      elemhez
Öröklődik: Nem
Százalékos értékek: Nincs 
      értelmezve

      
A border tulajdonság egy 'gyorstulajdonság', amelynek 
      segítségével egy deklaráción belül állítható be a border-top, 
      border-right, border-bottom és a 
      border-left tulajdonság értéke. 

      
A következő példában mutatott első deklaráció eredménye megegyezik a 
      második deklaráció eredményével: 
P { border: solid red }

                            P {
                            border-top: solid red
                            border-right: solid red
                            border-bottom: solid red
                            border-left: solid red
                            }


      
Eltérően a margin és padding 
      tulajdonságoktól, a border tulajdonság nem tud különböző 
      értékeket beállítani a különböző oldalakhoz. Ehhez a többi 
      szegélytulajdonságot kell hesználni. 

      
Vissza a 
      hivatkozó oldalra 

      
5.5.23 'width'

      
Értéke lehet: hossz | százalékos | 
      auto
Alapértelmezés: 
      auto
Alkalmazható: Blokkszintű elemekhez és 
      helyettesített elemekhez
Öröklődik: Nem
Százalékos 
      értékek: Viszonyítási alap a szülő elem szélessége

      
Ez a tulajdonság általában szöveg-elemekhez használatos, de igen 
      hasznos a helyettesített elemeknél (pl.: képek) is. Ezen a módon megadható 
      egy elem szélessége. Az elemek méretezésénél az oldalak aránya változatlan 
      marad, ha a height tulajdonság értéke auto. 
IMG.icon { width: 100px }


      
Ha a width és a height tulajdonság értéke is 
      auto; az elem saját eredeti méretével jelenik meg. 
      
Negatív értékek nem alkalmazhatók. 

      
A width tulajdonság és a margó, valamint a kitöltés 
      közötti kapcsolat leírásáért lásd a Formázásmodell 
      fejezetet. 

      
Vissza a 
      hivatkozó oldalra 

      
5.5.24 'height'

      
Értéke lehet: hossz | 
      auto
Alapértelmezés: 
      auto
Alkalmazható: Blokkszintű elemekhez és 
      helyettesített elemekhez
Öröklődik: Nem
Százalékos 
      értékek: Nincs értelmezve

      
Ez a tulajdonság általában szöveg-elemekhez használatos, de igen 
      hasznos a helyettesített elemeknél (pl.: képek) is. Ezen a módon megadható 
      egy elem szélessége. Az elemek méretezésénél az oldalak aránya változatlan 
      marad, ha a width tulajdonság értéke auto. 
IMG.icon { height: 100px }


      
Ha a width és a height tulajdonság értéke is 
      auto; az elem saját eredeti méretével jelenik meg. 
      
Negatív értékek nem alkalmazhatók. 

      
Ha az elem, amelyre alkalmazzuk nem helyettesített elem, a 
      böngészők figyelmen kívül hagyhatják a height tulajdonságot 
      (auto értékkel helyettesítik). 

      
Vissza a 
      hivatkozó oldalra 

      
5.5.25 'float'

      
Értéke lehet: left | right | 
      none
Alapértelmezés: 
      none
Alkalmazható: Minden 
      elemhez
Öröklődik: Nem
Százalékos értékek: Nincs 
      értelemzve

      
Ha none értékét alkalmazzuk, az elem ott jelenik meg, ahol 
      a szövegben az őt beillesztő kódsor található. 
Ha értéke 
      left (right); az elem a bal- (jobb-) oldalon fog 
      megjelenni, és a szöveg a jobb (bal) oldalán fog körbefutni. Ha értéke 
      left, vagy (right); az elem blokkszintűként 
      viselkedik. A teljes leírásért lásd a 4.1.4 
      pontot. 
IMG.icon {float: left; margin-left: 0; }

      
Fenti példa az összes 'icon' osztályba tartozó IMG elemet 
      a szülő elem bal oldalára helyezi el. 

      
A float tulajdonságot leggyakrabban soron belüli képekhez 
      használjuk, de jól alkalmazható szöveges elemekhez is. 

      
Példa

      

      

      

        
 
 
      

      
Vissza a 
      hivatkozó oldalra 

      
5.5.26 'clear'

      
Értéke lehet: none | left | 
      right | both 
Alapértelmezés: 
      none
Alkalmazható: Minden 
      elemhez
Öröklődik: Nem
Százalékos értékek: Nincs 
      értelmezve

      
Ez a tulajdonság határozza meg, hogy elem melyik oldalán engedélyezi 
      lebegő elemek megjelenését. Pontosabban: E tulajdonság értékei sorolják 
      fel azokat az oldalakat, ahol lebegő elemek nem jelenhetnek meg. Ha a 
      clear értéke leftre van beállítva, az elem, 
      amelyre alkalmaztuk, a bal oldalán levő bármely lebegő elem alá kerül. 

H1 { clear: left }


      
Példa

      

      

      

        
 
 
      

      
Ebben az esetben a "cl" osztályba tartozó Címsor a 
      "clear: left" tulajdonság miatt nem kerül a kép mellé. 

      
előző tetejére következő