CSS vlastnost margin urΦuje ╣φ°ku vn∞j╣φho okraje prvku.
| hodnoty | vn∞j╣φ okraj |
|---|---|
| dΘlka | vzdßlenost mezi p°φpadn²m rßmeΦkem a okolnφm dokumentem |
| procento | tatß╛ vzdßlenost vypoΦφtanß z rozm∞r∙ omezujφcφho nad°azenΘho prvku |
| auto | automatickΘ nastavenφ okraj∙ tak, aby protilehlΘ byly stejnΘ (nefunguje v IE) |
| a b c d | a = hornφ, b = prav², c = spodnφ a d = lev² vn∞j╣φ okraj (viz zadßvßnφ stran), kde abcd je n∞jakß v²╣e uvedenß hodnota |
| bez hodnoty (inherit) | prvek nemß ╛ßdnΘ vn∞j╣φ okraje, nebo je mß nastavenΘ podle html tagu na v²chozφ hodnotu |
Margin je vn∞j╣φ okraj. Vnit°nφ okraj je padding. Margin je okraj od rßmeΦku ven, padding od rßmeΦku dovnit°. Pod paddingem se vykresluje pozadφ, pod marginem ne. Pokud se u prvku nepou╛φvß rßmeΦek nebo pozadφ, je lep╣φ pou╛φvat margin spφ╣e ne╛ padding, proto╛e se v obou vykreslovacφch m≤dech a v r∙zn²ch prohlφ╛eΦφch poΦφtß stejn∞.
Margin se m∙╛e zadßvat jednou hodnotou najednou pro v╣echny Φty°i strany, nebo se vypφ╣e vφce hodnot pro r∙znΘ strany.
Existujφ varianty margin-top, margin-right, margin-bottom a margin-left urΦenΘ jen pro zadßnφ jednΘ strany vn∞j╣φho okraje. Majφ stejnΘ hodnoty.
P°i zadßnφ jednoho okraje se prvek posune, jako by m∞l relativnφ pozici. Lze zadßvat i zßpornΘ hodnoty, prvek se bude posouvat na druhou stranu. Nenφ to moc "Φist²" postup, ale funguje.
| Prohlφ╛eΦ | Podpora ve verzφch | Poznßmka |
|---|---|---|
| 3, 4, 5, 5.5, 6 | IE 3, 4 a 5.0 nepodporuje margin u °ßdkov²ch prvk∙ | |
| Mozilla (Netscape 6+) | v╣echny verze | |
| Opera | 4, 5, 6, 7 | Φty°ka se chovß divn∞ |
| Konqueror | ano | |
| IE 5 / Mac | ano | |
| Netscape Navigator 4 | velmi ╣patn∞ | tisφc drobn²ch problΘm∙ |
Dobr² nßpad je pohrßt si s nastavenφm hornφho a dolnφho okraje u nadpis∙ (tagy <h1> a╛ <h6>). Nap°φklad nadpis druhΘ ·rovn∞ <h2> se pou╛φvß ve v∞t╣in∞ text∙ a zpravidla vypadß lΘpe, pokud je nad nφm v∞t╣φ prostor ne╛ pod nφm.
<style>
h2 {margin-top: 1.5em; margin-bottom: 0.5em}
</style>
Jak je vid∞t, pou╛il jsem jednotku em (odpovφdß velikosti velkΘho pφsmena M), aby se velikosti okraj∙ zv∞t╣ovaly a zmen╣ovaly s pφsmem. V p°φkladu jsem pou╛il varianty vlastnosti margin margin-top = hornφ okraj a margin-bottom = dolnφ okraj. Dß se to zapsat celΘ jenom pomocφ vlastnosti margin:
<style>
h2 {margin: 1.5em 0px 0.5em 0px}
</style>
a v²sledek by m∞l b²t toto╛n² s p°edchozφm zßpisem. Jak je vid∞t, margin dovoluje zapsat v╣echny Φty°i strany najednou. V praxi to ale pova╛uji za mΘn∞ ╣ikovnΘ, tak╛e doporuΦuji pou╛φvat zßpis margin-strana, tedy pokud zrovna extrΘmn∞ ne╣et°φte data.
Jin² p°φklad se t²kß tagu <blockquote>. SΘmanticky (v²znamov∞) oznaΦuje blokovou citaci, graficky jej prohlφ╛eΦe vykreslujφ jako odstavec s velk²m lev²m a prav²m okrajem, kv∙li Φemu╛ se tag <blockquote> nevhodn∞ pou╛φvß na odsazovßnφ. Nßsledujφcφ p°φklad d∞lß dv∞ v∞ci: 1. zmen╣uje odsazenφ tagu <blockquote> na polovinu (normßln∞ je to 40px), 2. deklaruje t°φdu .odsazena, kterß se m∙╛e pou╛φt na odstavec nebo oddφl pro odsazenφ zleva:
<style>
blockquote {margin-left: 20px; margin-right: 20px}
.odsazena {margin-left: 40px}
</style>
Stejn∞ jako mß tag blockquote p°eddefinovanΘ okraje zleva a zprava, mß spousta dal╣φch html tag∙ p°eddefinovanΘ okraje shora a sdola. N∞kdy je to dost nep°φjemnΘ, proto╛e mezery (obvykle ve v²╣ce jednoho °ßdku) d∞lajφ na strßnce p∞knΘ dφry. Proto na zaΦßtek styl∙ mnoh²ch strßnek pφ╣u deklaraci, kterß (pokud pozd∞ji nestanovφm jinak) vyma╛e toto v²chozφ (neboli defaultnφ) margo u tag∙ form, ul, ol, a p:
<style>
form, ul, ol, p {margin: 0px}
p {margin-top: 2px}
</style>
°ßdek p {margin-top: 2px}p°itom znamenß, ╛e hornφ okraj tagu <p> chci mφt p°ece jenom alespo≥ dvoupixelov².
Kdy╛ se pou╛ije za margin: jenom jedna hodnota, vztahuje se na v╣echny Φty°i strany. P°φklad p°idßnφ okraje obtΘkanΘmu obrßzku:
<img src="fotka.jpg" width="200" height="150" style="float: right; margin: 8px">
obrßzek bude mφt na v╣ech stranßch okraj velikosti osmi pixel∙. Jednß se o efektivnφ nßhradu zastaral²ch html atribut∙ hspace a vspace.
┌zkΘ bloky, kter² majφ pravΘ i levΘ margo nastavenΘ na hodnotu auto, by se podle specifikace m∞ly v dokumentu vyst°edit:
<div style="margin: 0px auto; width: 400px">n∞jak² vyst°ed∞n² obsah</div>
to ale nefunguje v Internet Exploreru. Pro Explorer je nutno vyst°ed∞nφ realizovat pomocφ text-align a dvou zano°en²ch blok∙:
<div style="text-align: center">
<div style="text-align: left; width: 400px">
n∞jak² vyst°ed∞n² obsah
</div>
</div>
Kdy╛ se to spojφ dohromady, vyjde z toho vycentrovßnφ prvku funkΦnφ v naprostΘ v∞t╣in∞ prohlφ╛eΦ∙:
<div style="text-align: center">
<div style="text-align: left; width: 400px; margin: 0px auto">
n∞jak² vyst°ed∞n² obsah
</div>
</div>
Centrovan² CSS pozicovan² design
Neklikacφ odkaz v IE 6 strict (float + zßporn² margin)
Bug absolutnφho pozicovßnφ s marginem
Definice Φesky vypadajφcφho odstavce
Padding = vnit°nφ okraj, Border = rßmeΦek prvku, Width = ╣φ°ka prvku, Height = v²╣ka prvku, Text-indent = odsazenφ prvnφho °ßdku, DΘlky v CSS
Okraje objekt∙ - margin a padding
o tvorb∞, ·dr╛b∞ a zlep╣ovßnφ internetov²ch strßnek