Box model - Edutago

Model pudełkowy (box model) w CSS jest fundamentalnym konceptem, który opisuje sposób formatowania elementów na stronach internetowych. Każdy element w CSS jest traktowany jak pudełko, które może posiadać marginesy (margins), obramowania (borders), wypełnienia (padding) i faktyczną zawartość (content). Rozumienie działania modelu pudełkowego jest kluczowe do efektywnego stylizowania i układania elementów na stronie.

Przykład 1: Podstawy modelu pudełkowego

Poniżej przedstawiono przykład, który ilustruje podstawowe zastosowanie modelu pudełkowego, pokazując efekty marginesów, obramowania i wypełnienia.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Model w CSS3</title>
    <style>
        /* Stylizacja elementu z zastosowaniem modelu pudełkowego */
        .box {
            width: 200px; /* Szerokość zawartości */
            padding: 20px; /* Wypełnienie wokół zawartości */
            border: 5px solid black; /* Obramowanie */
            margin: 10px; /* Margines wokół pudełka */
            background-color: lightcoral; /* Kolor tła */
        }
    </style>
</head>
<body>
    <div class="box">Zawartość</div>
</body>
</html>

W tym przykładzie, .box reprezentuje element HTML stylizowany przy użyciu modelu pudełkowego. Ustawiono szerokość zawartości na 200px, 20px wypełnienia wokół zawartości, 5px obramowanie i 10px margines wokół pudełka. Ostateczny rozmiar pudełka będzie wynikiem sumy tych wartości.

Różne możliwe wartości

W CSS możemy użyć różnych wartości dla stylów związanych z modelem pudełkowym. Przykłady:

margin i padding: px, %, em itp. Pozwalają na ustalenie wielkości marginesów i wypełnienia.
- margin: 0 auto; – automatycznie centruje element w kontenerze.
border-style: solid, dotted, dashed, none itd. Określa styl obramowania.
border-width: px, %, em itp. Określa grubość obramowania.
background-color: określa kolor tła elementu.

Podsumowanie

Model pudełkowy w CSS3 jest podstawowym konceptem, który pozwala na precyzyjne kontrolowanie wyglądu i układu elementów na stronie internetowej. Rozumienie marginesów, obramowań, wypełnień i zawartości umożliwia tworzenie złożonych layoutów z łatwością. Przez eksperymentowanie z różnymi wartościami i właściwościami, można uzyskać oczekiwany efekt wizualny i funkcjonalny każdego elementu strony.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Poprzedni

Następny