Div szakasz alapmérete

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 -------->
width = 300px

<------- 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 />
div szakasz háttérszínnel, bekezdéssel</p>

<p>2. Bekezdések szövegsora <br />
háttérszínnel, bekezdéssel, kerettel.</p>

<h3>Címsor</h3>

<p>3. Bekezdések szövegsora <br />
div szakasz háttérszínnel, címsorral, bekezdéssel</p>

<h3>Címsor</h3>

<p>4. Bekezdések szövegsora <br />
div szakasz háttérszínnel, kerettel, címsorral, bekezdéssel</p>

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 />
div szakasz háttérszínnel, bekezdéssel</p>

<p>2. Bekezdések szövegsora <br />
háttérszínnel, bekezdéssel, kerettel.</p>

<h3>Címsor</h3>

<p>3. Bekezdések szövegsora <br />
div szakasz háttérszínnel, címsorral, bekezdéssel</p>

<h3>Címsor</h3>

<p>4. Bekezdések szövegsora <br />
div szakasz háttérszínnel, kerettel, címsorral, bekezdéssel</p>

Ö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.

Vissza a lap elejére