Následující úsek vznikl ze zdrojového kódu:
<div class="cerveny"> <div class="modry"> <p>...</p> <p>...</p> </div> </div>
<div class="cerveny"> vytváří kolem tenký červený
rámeček, aby byly vidět případné okraje celé konstrukce.
<div class="modry"> má světle modré pozadí, které
zviditelňuje okraje vnořených odstavců. Kromě toho má definován tmavě modrý
rámeček.
Odstavce mají ze všech čtyř stan nastaven stejně velký okraj (konkrétně 1em):
.modry p, {
background-color: white;
color: #ddd;
margin: 1em;
}
Díky prolínání okrajů se spodní okraj prvního odstavce prolne s horním okrajem druhého a mezera mezi nimi je proto stejně velká, jako mezery kolem:
Tady máme text prvního odstavce. Není nijak zvlášť důležitý, jen aby tu něco bylo.
Ani ve druhém odstavci nehledejte nic podstatného. Zdejší text ,á prostě jen vyplnit dané místo.
Rámeček kolem <div class="modry"> zabránil splynutí
svislých okrajů odstavců s okrajem rodičovského <div>
(stejný efekt by měla i výplň). Jakmile v kódu provedu jedinou změnu, a sice
vypuštění rámečku vnořeného <div>, bude výsledek velmi
odlišný:
Tady máme text prvního odstavce. Není nijak zvlášť důležitý, jen aby tu něco bylo.
Ani ve druhém odstavci nehledejte nic podstatného. Zdejší text ,á prostě jen vyplnit dané místo.
Tentokrát mezi okrajem (nulovým) vnořeného <div> a
odstavci již nestojí rámeček ani výplň, proto dojde k jejich prolnutí. De facto
to znamená, že se horní okraj prvního odstavce přesune do horního okraje
<div> a totéž se odehraje se spodním okrajem druhého
odstavce. Jelikož tento okraj již není uvnitř <div>, nemá
barvu jeho pozadí. Je průhledný.
zpět: CSS – okraje