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.
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
<!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:#7DCDE8;
}
</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>
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.
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
<!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:#7DCDE8;
}
</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>
