Margin vs. padding

Všímám si, že si lidé často pletou rozdíl mezi margin a padding a občas do toho někdo připlete i border.

Nejjednodušší způsob pochopení rozdílu je podhled na obrázek.

Vysvětlení margin a padding

Příklady zápisu margin a padding

div {
  padding: 50px;
}
/* všechny strany jsou 50px, stejně se použije i margin */
div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
div {
  padding: 25px 50px 75px 100px;
}
/* pořadí je: top right bottom left - podle hodinových ručiček */
div {
  padding: 25px 50px;
}
/* horní a spodní = 25px, pravý a levý = 50px */

Napsat komentář