width
Ak chceme prvku povedať aký má byť široký, použijeme vlastnosť width
CSS width – čo to je a čo o ňom reálne vieme Čo vlastne width robí Ak chceme prvku povedať aký má byť široký , použijeme vlastnosť width . Inými slovami: „Tento element má zaberať presne toľkoto miesta na šírku.“ Najčastejšie sa používa na: layout (kontajnery, karty, sekcie), obrázky, formuláre, komponenty (card, slider, sidebar…). Základná syntax .ukazka { width: 150px; } Ak chceme urobiť responzívne správanie , zvyčajne nepridávame len width , ale riešime aj maximá a minimá (k tomu sa dostaneme). Najčastejšie hodnoty width px – pevná šírka .ukazka { border: 1px solid #a50000; width: 150px; } Presná hodnota, nezávislá od rodiča, z le reaguje na mobiloch Použitie : ikonky, modaly, fixné UI prvky % – percento z rodiča .ukazka { border: 1px solid #a50000; width: 50%; } Počíta sa z rodičovského elementu, reaguje na zmenu layoutu, časté v grid/layoutoch Percentuálna width sa počíta z najbližšieho rodiča, ktorý má vypočítateľnú šírku – často je to block element, ktorý sám zaberá 100 % rodiča (napr. body ). vw – šírka viewportu .ukazka { border: 1px solid #a50000; width: 100vw; } 100vw = celá šírka obrazovky, často spôsobí horizontálny scroll (kvôli scrollbarom) Používaj opatrne, najmä mimo hero sekcií. auto – nech rozhodne obsah / layout .box { width: auto; } defaultná hodnota Šírka sa riadi layoutom (block element = 100 % rodiča) Často kombinovaná s max-width ch – šírka znaku ch – je jednotka založená na šírke znaku „0“, ktorá sa prakticky používa na obmedzenie dĺžky riadku textu. 1ch je šírka znaku „0“ (nula) v aktuálne použitej font-family, nie počet znakov. Meria sa v pixeloch , ale relatívne k fontu. .p { max-width: 65ch; } -tým negarantuješ presne 65 znakov v riadku , ale „Riadok má byť približne taký široký, ako keby sa doň zmestilo ~65 monospace znakov.“ A to chceme pre čitateľnosť. Dôležitý rozdiel: monospaced vs proporčné písmo Monospaced font (napr. Courier New )- každý znak má rovnakú šírku, 65ch ≈ 65 znakov v riadku Proporčné fonty (Arial, Inter, Roboto…), i je úzky, W je široký, medzery majú vlastnú šírku. Takže, počet znakov v riadku kolíše, ale optická dĺžka riadku je stabilná Responzívna klasika (odporúčaný vzor) .ukazka { border: 1px solid #a50000; width: 100%; max-width: 400px; margin: 0 auto; } význam: na mobile = 100 %, na veľkom monitore = maximálne 400px, centrovanie cez margin: auto Toto je zlatý štandard webov . Menej známe, ale veľmi užitočné hodnoty fit-content .ukazka { border: 1px solid #a50000; width: fit-content; } Šírka sa prispôsobí obsahu. Ideálne pre: badge, štítky, malé tlačidlá Podpora: dobrá , ale stále pozor pri starších browseroch (can i use: OK pre moderný web) min-content a max-content .ukazka { border: 1px solid #a50000; width: min-content; } min-content → zbalí obsah na minimum max-content → roztiahne podľa obsahu bez zalamovania Použitie: tabuľky, labely, špeciálne layouty. Moderné kombinácie (veľmi odporúčané) clamp() – responzívna šírka bez media queries .ukazka { border: 1px solid #a50000; width: clamp(300px, 50%, 800px); } Čítaj takto: minimum: 300px, ideál: 50 %, maximum: 800px Mentálny model (dôležité) Keď riešiš width , vždy si polož otázku: „Od čoho sa táto šírka počíta?“ px → od ničoho (pevná) % → od rodiča vw → od okna auto → od layoutu fit-content → od obsahu Krátke zhrnutie width určuje šírku prvku najčastejšie sa kombinuje s max-width moderný web = percentá + clamp + max-width nové hodnoty ( fit-content , clamp ) sú už bezpečné vw používať opatrne