Box Sizing w CSS

By /

CSS

Właściwość box-sizing w CSS jest fundamentalnym narzędziem do zarządzania modelem pudełkowym (box model) elementów. Pozwala ona deweloperom na kontrolę tego, jak rozmiary elementów są obliczane – czy mają uwzględniać padding i border, czy też nie. Właściwość box-sizing ma dwa główne wartości: content-box i border-box.

Standardowy Box Model: content-box

Wartość domyślna content-box oznacza, że szerokość i wysokość elementu dotyczą tylko treści elementu, bez paddingu i obramowania. Oznacza to, że dodając padding i border do elementu, jego całkowity rozmiar na stronie zwiększa się.

Alternatywny Box Model: border-box

Wartość border-box sprawia, że szerokość i wysokość elementu uwzględniają zawartość, padding i obramowanie, ale nie margines. Dzięki temu, dodając padding i border, rozmiar elementu się nie zmienia, co znacznie ułatwia projektowanie layoutów.

Przykład użycia box-sizing

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Box Sizing w CSS</title>
    <style>
        /* Globalne ustawienie box-sizing dla wszystkich elementów */
        *, *::before, *::after {
            box-sizing: border-box;
        }
        
        .content-box {
            width: 200px;
            padding: 20px;
            border: 5px solid black;
            box-sizing: content-box; /* Styl domyślny */
        }
        
        .border-box {
            width: 200px;
            padding: 20px;
            border: 5px solid red;
            box-sizing: border-box; /* Styl alternatywny */
        }
    </style>
</head>
<body>
    <div class="content-box">Content-box</div>
    <div class="border-box">Border-box</div>
</body>
</html>

Dlaczego border-box jest użyteczny?

Używanie border-box ułatwia zarządzanie layoutem, ponieważ deweloperzy nie muszą obliczać całkowitego rozmiaru elementu, uwzględniając padding i obramowanie. To sprawia, że wartość border-box jest często używana w nowoczesnym web designie, aby uproszczyć i przyspieszyć proces tworzenia responsywnych layoutów.

Podsumowanie

Właściwość box-sizing jest potężnym narzędziem w CSS, pozwalającym na precyzyjną kontrolę nad modelem pudełkowym. Wybór między content-box a border-box ma znaczący wpływ na sposób, w jaki elementy są wyświetlane na stronie. Ustawienie border-box jako globalne ustawienie jest popularną praktyką wśród front-end deweloperów, ponieważ ułatwia to projektowanie responsywnych i spójnych interfejsów użytkownika.

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

Powiązane artykuły

Scroll to Top