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

Najpopularniejsze problemy z HTML i CSS vol 1 - margin vs padding

Margin i padding to dwie właściwości CSS, które potrafią sprawić wiele trudności, zwłaszcza początkującym osobom. Poniżej opis każdej z nich.

Margin:
* margines zewnętrzny
* pozwala "odsunąć" element od innego elementu
* jeśli nadasz jednemu elementowi margin-top, a elementowi pod nim margin-bottom, właściwości nie będą się sumowały - zostanie wybrana ta, która ma większą wartość.
* nie wpływa na wielkość elementu
* może mieć ujemną wartość

Padding:
* margines wewnętrzny
* pozwala odsunąć zawartość elementu od jego krawędzi
* paddingi nie sumują się
* często stosowany do odsuwania na przykład tekstu od krawędzi elementu nadrzędnego
* może wpływać na wielkość elementu (jeśli ma on ustawiony box-sizing: content-box)
* może posłużyć do zmiany wysokości elementu - jest to wskazane, ponieważ zwykle nie ustawia się sztywnej wartości dla wysokości
* nie może mieć ujemnej wartości

Poniżej ilustracja diva bez paddingu oraz z paddingiem.

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