Ostatnio edytowany:

box-sizing

Autor: Virtual Patriot

Opis właściwości box-sizing

Za pomocą właściwości box-sizing możemy określić w jaki sposób takie właściwości CSS jak: width, min-width, max-width, height, min-height, max-height, flex-basis (czyli właściwości CSS określające rozmiar obszaru zawartości elementu HTML) powinny oddziaływać na interesujący nas element HTML.

Dodatkowe techniczne informacje o właściwości box-sizing

przeznaczenie

każdy element HTML, do którego możemy dodać właściwość width lub właściwość height

dziedziczenie

nie

wartość initial

content-box

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości box-sizing

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 8

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości box-sizing

content-box

Opis

Wartość content-box jest domyślną wartością właściwości box-sizing.

Domyślnie właściwości CSS określające rozmiar obszaru zawartości elementu HTML rzeczywiście określają wyłącznie rozmiar obszaru zawartości elementu HTML, co oznacza, że rozmiar elementu HTML może zostać powiększony o rozmiar marginesów wewnętrznych oraz o rozmiar obramowania.

Przykład

  box-sizing:content-box;
rozmiar obszaru zawartości tego elementu "div" wynosi 400 pikseli na 700 pikseli, ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "400px" oraz właściwość "height" wraz z wartością "700px", natomiast ze względu na to, iż do tego elementu "div" została dodana właściwość "padding" wraz z wartością "20px" oraz właściwość "border" wraz z między innymi wartością "10px" rozmiar tego elementu "div" wynosi 460 pikseli na 760 pikseli

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        width:400px;
        height:700px;
        padding:20px;
        border:10px solid black;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      rozmiar obszaru zawartości tego elementu "div" wynosi 400 pikseli na 700 pikseli, ponieważ do tego elementu "div" została dodana właściwość "width" wraz z wartością "400px" oraz właściwość "height" wraz z wartością "700px", natomiast ze względu na to, iż do tego elementu "div" została dodana właściwość "padding" wraz z wartością "20px" oraz właściwość "border" wraz z między innymi wartością "10px" rozmiar tego elementu "div" wynosi 460 pikseli na 760 pikseli
    </div>

  </body>
</html>

border-box

Opis

Za pomocą wartości border-box właściwości box-sizing możemy sprawić, że właściwości CSS określające rozmiar obszaru zawartości interesującego nas elementu HTML nie będą określały rozmiaru obszaru zawartości interesującego nas elementu HTML, lecz będą określały rozmiar interesującego nas elementu HTML.

Ewentualne marginesy wewnętrzne, czy też obramowanie, w tym wypadku pomniejszą rozmiar obszaru zawartości elementu HTML. Ponadto w sytuacji gdy rozmiar obszaru zawartości elementu HTML zostanie pomniejszony do zera, wtedy pozostały rozmiar marginesów wewnętrznych, czy też rozmiar obramowania, zaczną powiększać rozmiar elementu HTML.

Przykład

  box-sizing:border-box;
ponieważ do tego elementu "div" została dodana właściwość "box-sizing" wraz z wartością "border-box", od tej pory właściwość "width" oraz właściwość "height" określa rozmiar tego elementu "div", który w tym wypadku wynosi 400 pikseli na 700 pikseli, natomiast ze względu na to, iż do tego elementu "div" została dodana właściwość "padding" wraz z wartością "20px" oraz właściwość "border" wraz z między innymi wartością "10px" rozmiar obszaru zawartości tego elementu "div" wynosi 340 pikseli na 640 pikseli

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        box-sizing:border-box;
        width:400px;
        height:700px;
        padding:20px;
        border:10px solid black;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      ponieważ do tego elementu "div" została dodana właściwość "box-sizing" wraz z wartością "border-box", od tej pory właściwość "width" oraz właściwość "height" określa rozmiar tego elementu "div", który w tym wypadku wynosi 400 pikseli na 700 pikseli, natomiast ze względu na to, iż do tego elementu "div" została dodana właściwość "padding" wraz z wartością "20px" oraz właściwość "border" wraz z między innymi wartością "10px" rozmiar obszaru zawartości tego elementu "div" wynosi 340 pikseli na 640 pikseli
    </div>

  </body>
</html>