C18: Elrendezés tervezésekor a CSS margó és kitöltési szabályok alkalmazása a térköz képek helyett
Alkalmazás
A CSS-t támogató összes technológiánál.
Ez a technika az alábbiakra vonatkozik:
A felhasználói programra és a segítő technológia támogatására vonatkozó megjegyzések
A Microsoft Windows platformon "quirks" módban működő Internet Explorer 5, Internet Explorer 5.5, Internet Explorer 6.0 és Internet Explorer 7 olyan doboz modellt használ, amely eltér a W3C CSS specifikációktól. Ezeknek a böngészőknek az esetében a jobb és bal kitöltés, valamint a jobb és bal szegélyek nem növelik meg az elem teljes szélességét, vagyis ezeken az elemeken belül a tartalomnak kevesebb hely jut. (Ezt a működést "doboz modell hibaként" is ismerjük.) A Windows alapon működő Internet Explorer 6 és 7, illetve a MAC OS alapon futó Internet Explorer 5.5 "szabványos módban" üzemelve, a W3C CSS specifikációknak megfelelő doboz modellt használ.
Leírás
A webszerkesztők bizonyos esetekben térköz képeket (rendszerint 1x1 pixel méretű átlátszó GIF képeket) használnak a felépítés, például táblázatok, vagy bekezdés behúzások jobb beállítására. Az egymásba ágyazott stíluslapok módszer (CSS) azonban rendelkezik olyan technikával, amely kiválthatja a térköz képeket. A CSS margó és kitöltés tulajdonságok egyedül vagy egymással kombinálva is használhatók az elrendezés szabályozására. A margó tulajdonságok ('margin-top', 'margin-right', 'margin-bottom', 'margin-left', és a gyorsíró margó') minden blokként megjelenített elemen alkalmazhatók. Ez a beállítás térközt ad az elem külső részéhez. A kitöltés tulajdonságok ('padding-top', 'padding-right', 'padding-bottom', 'padding-left', és a gyorsíró kitöltés) bármilyen elemmel együtt használhatók. Ez a művelet az elemen belül növeli meg a térközt.
Példák
1. példa
Az alábbi példa két részből áll. Az egyik a táblázat szegélyeinek margóit, illetve a táblázat celláinak kitöltését meghatározó CSS kód, míg a másik a táblázat HTML kódja. Az utóbbi nem tartalmaz térköz képeket és nem került beágyazásra egy másik táblázatba.
Példa kód:
table { margin: .5em; border-collapse: collapse; }
td, th { padding: .4em; border: 1px solid #000; }
...
<table summary="Titles, authors and publication dates of books in Web development category">
<caption>Books in the category 'Web development'</caption>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>How to Think Straight About Web Standards</td>
<td>Andrew Stanovich</td>
<td>1 April 2007</td>
</tr>
</tbody>
</table>
Források
A források csak információs célokat szolgálnak, és csak angolul elérhetőek.
Ellenőrzések
Ehhez a technikához nincsenek elérhető ellenőrzések.