Box-sizing w CSS3

By /

CSS

W świecie CSS, właściwość box-sizing jest kluczowym elementem, który pozwala deweloperom na lepsze zarządzanie i kontrolowanie layoutu strony. Przed wprowadzeniem CSS3 i właściwości box-sizing, szerokość i wysokość elementów były czasami trudne do przewidzenia, zwłaszcza gdy dodawano wewnętrzne odstępy (padding) oraz obramowania (border). Właściwość box-sizing pozwala określić, w jaki sposób szerokość i wysokość elementów są obliczane, co ułatwia tworzenie responsywnych i precyzyjnie zaprojektowanych layoutów.

Właściwości box-sizing

W CSS3, box-sizing przyjmuje jedną z dwóch wartości:

  • content-box (domyślnie): Szerokość i wysokość elementu obejmują tylko treść, nie uwzględniając paddingu ani obramowania.
  • border-box: Szerokość i wysokość elementu uwzględniają treść, padding oraz obramowanie, ale nie obejmują marginesu zewnętrznego (margin).

Przykład użycia box-sizing

Zobaczmy, jak box-sizing może być użyte w praktyce, aby stworzyć dwa prostokąty o tej samej widocznej szerokości, ale z różnym ustawieniem box-sizing.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box-sizing w CSS3</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            margin: 20px;
            background-color: lightblue;
        }

        .content-box {
            box-sizing: content-box;
            padding: 20px;
            border: 5px solid black;
        }

        .border-box {
            box-sizing: border-box;
            padding: 20px;
            border: 5px solid black;
        }
    </style>
</head>
<body>

<div class="box content-box">Content-box</div>
<div class="box border-box">Border-box</div>

</body>
</html>

W powyższym przykładzie, oba prostokąty mają zadeklarowaną taką samą szerokość i wysokość. Jednak dzięki różnym ustawieniom box-sizing, ich efektywna szerokość i wysokość różnią się. content-box powoduje, że padding i border są dodawane do zadeklarowanej szerokości i wysokości, czyniąc element większym. W przypadku border-box, padding i border są wliczane do szerokości i wysokości elementu, przez co finalny rozmiar pozostaje zgodny z zadeklarowanymi wartościami, a treść jest odpowiednio mniejsza.

Podsumowanie

Właściwość box-sizing w CSS3 jest niezwykle przydatna dla web deweloperów, ponieważ pozwala na bardziej intuicyjne i kontrolowane zarządzanie rozmiarami elementów. Użycie border-box jest szczególnie polecane w responsywnych layoutach, gdzie precyzyjne zarządzanie szerokością elementów jest kluczowe. Dzięki box-sizing, deweloperzy mogą tworzyć layouty, które zachowują spójność i precyzję na różnych urządzeniach i rozdzielczościach ekranu.

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

Powiązane artykuły

Scroll to Top