sobota, 4 marca 2017

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.

Brak komentarzy:

Prze艣lij komentarz