CSS - vlastnosti blokov²ch element∙

V tomto dφle si detailn∞ji popφ╣eme vlastnosti blokov²ch element∙, zm∞nu jejich velikosti, vnit°nφch i vn∞j╣φch okraj∙ a rßmeΦk∙.

Velikost

Velikost blokov²ch element∙ urΦujφ vlastnosti width a height. width urΦuje ╣φ°ku, height v²╣ku elementu. Obojφ lze urΦovat dΘlkov²mi jednotkami, procentußln∞ (z maximßlnφ mo╛nΘ ╣φ°ky/v²╣ky) a obojφ lze nastavit na auto (danß vlastnost se p°izp∙sobφ okolnostem, nefunguje spolehliv∞ ve v╣ech prohlφ╛eΦφch).

Box model

Dal╣φ vlastnosti blokov²ch element∙ reprezentuje tzv. box model. Jeho nßΦrt vypadß asi takto:

JednotlivΘ vlastnosti si nφ╛e detailn∞ji popφ╣eme.

Vn∞j╣φ okraj (margin)

Vn∞j╣φm okrajem myslφme mφsto vn∞ blokovΘho prvku, kde se nesmφ nachßzet nic jinΘho (╛ßdn² jin² prvek, ani rßmeΦek prvku rodiΦovskΘho). Nßsledujφcφ p°φklad mluvφ sßm za sebe:

Jak jste u╛ jist∞ vypozorovali, tato vlastnost mß nßzev margin a k definovßnφ tohoto kraje se pou╛φvajφ dΘlkovΘ jednotky.

Vn∞j╣φ okraj, nebo-li margin m∙╛eme nastavit bu∩ pro v╣echny strany stejn²:

div { margin:5px; }

Nebo pro ka╛dou stranu jin²:

div {
margin-top:1px; /* hornφ okraj */
margin-right:2px; /* prav² okraj */
margin-bottom:3px; /* dolnφ okraj */
margin-left:4px; /* lev² okraj */
}

To samΘ lze vyjßd°it i zkrßcen²m zßpisem:

div { margin: 1px 2px 3px 4px; }

RßmeΦek (border)

U rßmeΦku m∙╛eme definovat t°i vlastnosti - tlou╣╗ku (border-width) pomocφ dΘlkov²ch jednotek, styl (border-style) a barvu (border-color). Tabulka styl∙ je zde:

P°φklad:

div {
border-width:1px;
border-style:solid;
border-color:#000000;
}

P°φklad urΦuje, ╛e rßmeΦek tohoto objektu bude 1 pixel tlust², bude tvo°en jednoduchou Φßrou a jeho barva bude #000000, tedy Φernß. Podobn∞ jako u vlastnosti margin i zde lze provΘst zkrßcen² zßpis:

div { border:1px solid #000000; }

I rßmeΦek m∙╛eme definovat pro ka╛dou stranu jin² p°idßnφm -top (naho°e), -right (vpravo), -bottom (dole), nebo -left (vlevo) hned za border. V²slednΘ konstrukce mohou vypadat n∞jak takto:

border-left (lev² rßmeΦek - v╣echny vlastnosti)
border-left-style (lev² rßmeΦek - styl)
border-bottom (dolnφ rßmeΦek - v╣echny vlastnosti)
border-bottom-width (lev² rßmeΦek - ╣φ°ka)
atd.

Vnit°nφ okraj (padding)

Vlastnost padding se podobß vlastnosti margin, definuje ale mezeru mezi rßmeΦkem elementu a jeho obsahem. Stejn∞, jako u margin se k definovßnφ pou╛φvajφ dΘlkovΘ jednotky a i tentokrßt si ukß╛eme ilustrativnφ obrßzek:

Stejn∞, jako okraj vn∞j╣φ, m∙╛eme i ten vnit°nφ nastavit pro v╣echny strany stejn²,

div { padding:5px; }

pro ka╛dou stranu jin²,

div {
padding-top:1px; /* hornφ okraj */
padding-right:2px; /* prav² okraj */
padding-bottom:3px; /* dolnφ okraj */
padding-left:4px; /* lev² okraj */
}

nebo pou╛φt zkrßcen² zßpis:

div { margin: 1px 2px 3px 4px; }

Marek Soldßt, marek@soldat.cz

Autor je ╣Θfredaktorem serveru Einstein.cz.