Najpopularniejsze problemy z HTML i CSS vol 2 - border-box vs content-box

Jedno z najczęstszych pytań na rozmowie kwalifikacyjnej - czym się różni box-sizing: border-box od content-box.

Najłatwiej będzie pokazać to na przykładzie:

See the Pen box sizing by Kamil (@KamilNaja) on CodePen.

Div content-box ma nadany box-sizing: content-box i jest wyraźnie większy od swojego kolegi, który ma nadany box-sizing: border-box.
Pierwotnie, jedynym dostępnym ustawieniem był box-sizing: content-box, w którym na wysokość elementu wpływała:

• Jego wysokość w height +
• Jego border +
• Jego padding górny i dolny

Podobnie, na szerokość elementu wpływa jego szerokość + padding lewy i prawy + border.
Takie ustawienie jest też domyślne, jeśli nie używasz reset.css czy normalize.css i często prowadzi to do problemów z ustawieniem odpowiedniej wysokości i szerokości elementów. Rozwiązaniem tego problemu jest box-sizing: border-box, w którym na ustawioną szerokość i wysokość, nie mają wpływu ustawienia border lub padding.

Wyobraź sobie, że na przykład tworzysz design strony z dwoma kolumnami o szerokości 50% obok siebie. Jeśli nadasz im jakiś border lub padding, układ się zepsuje. Rozwiązaniem problemu jest nadanie elementom odpowiedniego box-sizing, czyli border-box.

See the Pen dwie kolumny - problem z border-box by Kamil (@KamilNaja) on CodePen.

Jak to wygląda w praktyce?

W praktyce, w większości przypadków, nadpisanie box-sizing: content-box jest jedną z pierwszych czynności, którą robimy przy tworzeniu strony. Można to zrobić za pomocą arkusza Normalize.css lub zadeklarować to w arkuszu CSS. Odpowiedni kod znajdziesz na stronie css-tricks. Jeśli tworzysz stronę na Bootstrapie, masz już ustawiony box-sizing na border-box.

Źródła:

https://css-tricks.com/box-sizing/

http://webroad.pl/html5-css3/525-box-sizing-powrot-do-przeszlosci