2024-05-19 07:46:19
  • Hello!
  • Whats ya doin?
  • ByeBye

[&]

18.190.176.78

Model pudełkowy

workshop: #22c1-box-model.html

Mini-warsztat CSS: model pudełkowy

Przykład stosowania właściwości CSS używanych przy tzw. modelu pudełkowym.

Przygotowanie

Wykonuj kolejne kroki warsztatu obserwując zmiany aż do osiągnięcia efektu końcowego.

  1. Utwórz węzeł HTML używając znacznika P
  2. Dodaj wysokość i szerokość regułami: height oraz width
  3. Użyj odstępu wewnętrznego stosując regułę: padding
  4. Zastosuj ramkę dla znacznika poprzez regułę: border
  5. Użyj odstępu zewnętrznego - reguła: margin

Zawartość znacznika P

Model pudełkowy

Model pudełkowy

Model pudełkowy

Model pudełkowy

Podsumowanie

  1. Jakie składowe (reguły) elementu wliczają się w szerokość i wysokość elementu?
  2. Czy margines należy do obszaru elementu? Czy stosując ujemny margines na elemencie można odzyskać przestrzeń zajmowaną przez element?
  3. Jak na zajmowany przez element obszar wpływa outline w stosunku do border ?