Každý HTML element je obdélník. box-sizing, width, height, padding, margin, border, outline, overflow — základ CSS layoutu.
* { box-sizing: border-box; } — pak width zahrnuje padding i border, výpočty jsou intuitivní.
Jak se počítá width a height. border-box = zlatý standard, vždy nastavte globálně.
content-box (default): width NEzahrnuje padding a border — element je fyzicky širší než nastavená width. border-box: width zahrnuje vše — padding a border jsou uvnitř zadané šířky. border-box je výrazně intuitivnější.
*, *::before, *::after { box-sizing: border-box; }/* ✅ ZLATÉ PRAVIDLO — vždy nastavit */
*, *::before, *::after {
box-sizing: border-box;
}
/* content-box (default) — NEINTUITIVNÍ */
.box-content {
box-sizing: content-box;
width: 200px;
padding: 20px;
/* Fyzická šířka: 240px! */
}
/* border-box — INTUITIVNÍ */
.box-border {
box-sizing: border-box;
width: 200px;
padding: 20px;
/* Fyzická šířka: stále 200px */
/* Content: 160px (200 - 20 - 20) */
}
auto, px, %, vw/vh, min-content, max-content, fit-content. min-width/max-width pro responzivitu.
auto: prohlížeč dopočítá (block = plná šířka rodiče, inline = dle obsahu). %: relativní k rodiči. vw/vh: viewport. fit-content: jako obsah ale nepřekročí dostupný prostor. min-content/max-content: minimální/maximální šířka dle obsahu.
| min-width | Minimální šířka — nepůjde pod tuto hodnotu |
| max-width | Maximální šířka — nepřekročí tuto hodnotu |
| min-height | Minimální výška |
| max-height | Maximální výška |
/* Pevné */
.box { width: 300px; height: 200px; }
/* Responzivní kontejner */
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}
/* Moderní zkratka */
.container {
width: min(90%, 1200px);
margin: 0 auto;
}
/* Viewport výška */
.hero { min-height: 100vh; }
.hero { min-height: 100dvh; } /* mobilní */
/* Podle obsahu */
.chip {
width: fit-content;
padding: 4px 12px;
}
/* Čtverec bez height */
.avatar {
width: 60px;
aspect-ratio: 1; /* = height: 60px */
}
/* 16:9 video container */
.video-wrap {
width: 100%;
aspect-ratio: 16 / 9;
}
/* Responsive img */
img {
max-width: 100%;
height: auto;
}
Prostor mezi obsahem a borderem. Background barva ho pokrývá. Shorthand: top right bottom left (TRouBLe).
padding je prostor uvnitř elementu. Background barva zasahuje do paddingu. Margin je vždy průhledný. Mnemotechnická pomůcka pro pořadí: TRouBLe = Top, Right, Bottom, Left.
| padding-top | Horní odsazení |
| padding-right | Pravé odsazení |
| padding-bottom | Dolní odsazení |
| padding-left | Levé odsazení |
| padding-block | Top + bottom (logical property) |
| padding-inline | Left + right (logical property) |
/* 1 hodnota = všechny strany */
.box { padding: 16px; }
/* 2 hodnoty: top/bottom, left/right */
.box { padding: 8px 16px; }
/* 3 hodnoty: top, left/right, bottom */
.box { padding: 4px 16px 8px; }
/* 4 hodnoty: top right bottom left */
.box { padding: 4px 8px 12px 16px; }
/* Longhand */
.box {
padding-top: 16px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
}
/* em = škáluje s font-size (doporučeno pro tlačítka) */
.btn {
font-size: 1rem;
padding: 0.6em 1.2em;
/* Roste automaticky s font-size */
}
/* Logical properties (RTL-friendly) */
.box {
padding-block: 1rem; /* top + bottom */
padding-inline: 1.5rem; /* left + right */
}
Průhledný prostor vně elementu. auto = centrovat. Pozor na margin collapsing! Záporné hodnoty jsou OK.
margin je průhledný prostor vně elementu. margin: 0 auto centruje blokový element horizontálně. Margin collapsing: vertikální marginy sousedních blokových elementů se slučují — bere se větší z nich. Záporné marginy jsou validní a užitečné.
| margin-top/right/bottom/left | Jednotlivé strany |
| margin-block | Top + bottom (logical) |
| margin-inline | Left + right (logical) |
/* Centrovat blokový element */
.container {
max-width: 1200px;
margin: 0 auto;
}
/* Margin collapsing demo */
h1 { margin-bottom: 32px; }
p { margin-top: 16px; }
/* Mezera = 32px (ne 48px!) */
/* Zabránit collapsing */
.parent {
display: flex; /* zabrání */
flex-direction: column;
}
/* Margin auto v Flexboxu */
.nav { display: flex; }
.nav-right { margin-left: auto; }
/* nav-right se přitlačí doprava */
/* Záporný margin */
.pull-up {
margin-top: -20px; /* posunout nahoru */
}
/* Logical properties */
.box {
margin-block: 1.5rem; /* top + bottom */
margin-inline: auto; /* centrovat */
}
Shorthand: šířka styl barva. border-radius pro zaoblení. Různé styly: solid, dashed, dotted, double.
border shorthand: border: width style color. Zabírá místo v box modelu. border-radius zaoblí rohy — 50% na čtverci = kruh. outline je podobný ale nezabírá místo a je vně box modelu — ideální pro focus indikátory.
| border-width | Šířka: thin, medium, thick nebo px |
| border-style | Styl: solid, dashed, dotted... |
| border-color | Barva rámečku |
| border-top/right/bottom/left | Jedna strana |
| border-radius | Zaoblení rohů |
| outline | Jako border ale vně box modelu |
| outline-offset | Mezera mezi elementem a outline |
/* Shorthand */
.box { border: 2px solid #333; }
/* Jen jedna strana */
.underlined {
border-bottom: 2px solid blue;
}
/* Zaoblení */
.card { border-radius: 8px; }
.pill { border-radius: 9999px; }
.circle {
border-radius: 50%;
/* Potřebuje stejnou width a height! */
}
/* Různé rohy (TL TR BR BL) */
.custom { border-radius: 16px 4px 16px 4px; }
/* Outline pro focus */
:focus-visible {
outline: 2px solid blue;
outline-offset: 2px;
/* NIKDY outline: none; bez náhrady! */
}
/* Gradient border (trik) */
.gradient-border {
border: 2px solid transparent;
background:
linear-gradient(white, white) padding-box,
linear-gradient(135deg, #818CF8, #F472B6)
border-box;
}
/* border-image */
.fancy {
border: 3px solid transparent;
border-image:
linear-gradient(to right, red, blue) 1;
}
Co se stane když obsah je větší než kontejner. visible, hidden, scroll, auto, clip.
visible (default): obsah přetéká, nezořízne se. hidden: ořízne přetékající obsah + clearuje floaty (vytvoří BFC). auto: scrollbar jen pokud obsah přetéká. scroll: scrollbar vždy. clip: ořízne bez BFC (modernější).
| overflow-x | Horizontální přetečení |
| overflow-y | Vertikální přetečení |
| text-overflow: ellipsis | Ořízne text s "..." — potřebuje overflow: hidden + white-space: nowrap |
/* Oříznutí pro hover efekt */
.card { overflow: hidden; }
.card img:hover { transform: scale(1.1); }
/* Bez overflow: hidden by obrázek přetekl */
/* Responzivní tabulka */
.table-wrap { overflow-x: auto; }
/* Scrollovatelný sidebar */
.sidebar {
height: 100vh;
overflow-y: auto;
}
/* Text s "..." (ellipsis) */
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
}
/* Víceřádkový ellipsis */
.clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Vlastní scrollbar */
.scroll-area {
overflow-y: auto;
scrollbar-width: thin; /* Firefox */
scrollbar-color: #888 transparent;
}
/* Chrome */
.scroll-area::-webkit-scrollbar { width: 6px; }
.scroll-area::-webkit-scrollbar-thumb {
background: #888;
border-radius: 3px;
}
Jako border ale VNĚ box modelu — nezabírá místo, neovlivní layout. Povinné pro :focus-visible.
outline je obrys vně box modelu. Klíčový rozdíl od border: outline nezabírá místo — přidání outline neposune okolní elementy. Shorthand stejný jako border: width style color. Nikdy nevymažte outline bez náhrady — je to hlavní indikátor focusu pro klávesnicové uživatele.
| outline-width | Šířka outlines | px |
| outline-style | Styl: solid, dashed, dotted | solid |
| outline-color | Barva outlines | barva |
| outline-offset | Mezera mezi elementem a outline | px |
/* ✅ Správně: :focus-visible */
:focus-visible {
outline: 2px solid #2563EB;
outline-offset: 2px;
}
/* ✅ Odstranit jen pro myš */
:focus:not(:focus-visible) {
outline: none;
}
/* ✅ Vlastní focus pro tlačítka */
.btn:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
border-radius: 4px; /* outline respektuje */
}
/* ❌ NIKDY toto! */
* { outline: none; }
:focus { outline: none; }
/* Znemožní navigaci klávesnicí! */
/* Outline nezabírá místo */
.box {
width: 100px;
outline: 10px solid red;
/* Element stále zabírá jen 100px */
/* Outline je navíc, vně */
}