|
|
Div szakasz alapmérete
Mobilváltozat!
Asztali változathoz,
kattints a képre!
Adott div szakasz alapmérete, Explorer és Mozilla Firefox böngészőben
Egy adott div szakasz szélessége, a következőkből tevődik össze
border-left + padding-left + width + padding-right + border-right = Valós szélesség
Példa:
Első div szakasz: #div01{width: 300px;}
Második div szakasz: #div02{width: 300px; border: 10px solid black;}
Harmadik div szakasz: #div03{width: 300px; border: 10px solid black; padding: 20px;}
Valós szélességi értékek:
Első: width 300px = 300px
Második: border 10px + width 300px + border 10px = 320px
Harmadik: border 10px + padding 20px + width 300px + padding 20px + border 10px = 360px
|
<------- Div szakasz szélessége --------> |
|
<------- Div szakasz szélessége --------> |
|
<------- Div szakasz szélessége --------> |
Egy adott div szakasz magassága, a következőkből tevődik össze
Explorer esetében:
Felső border + felső padding + szövegsorok és azok betűmérete + alsó padding + alsó border = Magasság
Mozilla Firefox esetében, ha keretet is alkalmazunk:
Pluszként hozzá kell adni, az alkalmazott fenti és lenti betűméretet.
Felső border + felső padding + szövegsorok és azok betűmérete + alsó padding + alsó border + fenti betűméret + lenti betűméret = Magasság
A következő részben, négy dív szakasz látható.
Első példa:
Explorer és Mozilla Firefox böngészőkben!
A div szakaszok magasságának méretei eltérőek, ha, keretet is alkalmazunk.
(Magassági értéket "height" és belső margót "padding" egyik div szakasznál sem alkalmazunk.)
Első: Csak bekezdés szövegét tartalmazza.
Második: Bekezdés szövegét és 5px keretet tartalmaz.
Harmadik: Címsort és bekezdés szövegét tartalmazza.
Negyedik: Címsort és bekezdés szövegét + 5px vastag keretet is tartalmaz
|
<p>1. Bekezdések szövegsora <br /> <p>2. Bekezdések szövegsora <br /> |
<h3>Címsor</h3><p>3. Bekezdések szövegsora <br /> |
<h3>Címsor</h3><p>4. Bekezdések szövegsora <br /> |
Második példa:
Explorer és Mozilla Firefox böngészőkben!
A div szakaszok magasságának méretei egyformák, ha, keretet is alkalmazunk.
Keret alkalmazásánál, Mozilla is úgy jelenítse meg a div szakaszok magasságát mint az Explorer, a következő meghatározásokat kell beírni:
A második div szakaszhoz:
#masodik p{margin: 0px;}
A negyedik div szakaszhoz:
#negyedik h3{margin-top: 0px;}
#negyedik p{margin: 0px;}
|
<p>1. Bekezdések szövegsora <br /> <p>2. Bekezdések szövegsora <br /> |
<h3>Címsor</h3><p>3. Bekezdések szövegsora <br /> |
<h3>Címsor</h3><p>4. Bekezdések szövegsora <br /> |
Összegezve:
A div szakaszokban elhelyezett jelölőelemek esetében (címsor, bekezdés, stb.), az elsőnek beírt jelölőelemnek, határozzuk meg a felső margó értékét, az utolsónak beírt jelölőelemnek, határozzuk meg az alsó margó értékét.
Ha így járunk el, akkor mindegyik böngészőben egyforma magassági értéke lesz, az adott div szakasznak.