Sobes.tech
Pomoc s pohovorom
Zdroje
Príprava na pohovor
Zdroje
Hľadanie práce
Zdroje
Právne
Späť k otázkam
Junior

Čo je to box model v CSS?

sobes.tech AI

Odpoveď od AI

CSS model blokov popisuje, ako sa elementy zobrazujú na stránke ako obdĺžnikové bloky. Skladá sa zo štyroch zón alebo vrstiev, ktoré sa prekryvajú od obsahu:

  1. Content (Obsah): Oblasť, kde sa nachádza skutočný obsah prvku (text, obrázky atď.). Jeho veľkosť je určená vlastnosťami width a height.

  2. Padding (Vnútorný okraj): Priehľadná oblasť medzi obsahom a hranicou prvku. Nastavuje sa vlastnosťami padding-top, padding-right, padding-bottom, padding-left alebo skrátenou vlastnosťou padding.

  3. Border (Hranica): Čiara obklopujúca Padding a Content. Štýl, hrúbka a farba sa nastavujú vlastnosťami border-width, border-style, border-color alebo skrátenými vlastnosťami, napríklad border.

  4. Margin (Vonkajší okraj): Priehľadná oblasť okolo hranice prvku, ktorá ho oddeľuje od iných prvkov. Nastavuje sa vlastnosťami margin-top, margin-right, margin-bottom, margin-left alebo skrátenou vlastnosťou margin. Margíny susedných blokov sa môžu zlúčiť.

Štandardné správanie, opísané s box-sizing: content-box (štandardne), určuje, že vlastnosti width a height sa týkajú iba obsahu bloku (Content). Padding a Border sa pridávajú k tejto veľkosti, zväčšujúc celkovú veľkosť prvku.

Použitím box-sizing: border-box, vlastnosti width a height zahŕňajú Content, Padding a Border. Margin sa vždy pridáva k celkovej veľkosti prvku, bez ohľadu na box-sizing.

Príklad:

div {
  width: 100px; /* Šírka Content (pre content-box) alebo celej položky (pre border-box) */
  height: 50px; /* Výška Content (pre content-box) alebo celej položky (pre border-box) */
  padding: 10px; /* Vnútorný okraj */
  border: 2px solid black; /* Hranica */
  margin: 15px; /* Vonkajší okraj */
}

V závislosti od hodnoty box-sizing, budú skutočné rozmery prvku odlišné.

  • box-sizing: content-box: Skutočná šírka = 100px (Content) + 10px (Padding-left) + 10px (Padding-right) + 2px (Border-left) + 2px (Border-right) = 124px. Skutočná výška = 50px (Content) + 10px (Padding-top) + 10px (Padding-bottom) + 2px (Border-top) + 2px (Border-bottom) = 74px.
  • box-sizing: border-box: Skutočná šírka = 100px (Content + Padding + Border). Skutočná výška = 50px (Content + Padding + Border).

Vonkajší okraj margin: 15px sa pridáva okolo tejto celkovej veľkosti.

PredchádzajúceĎalej