Luft

margin og padding er de to mest brukte egenskapene for å gi luft til elementer. En margin er avstanden utenfor noe, mens padding er luft inni noe.

Endre koden for h2-elementet til:

h2 {
  font-size: 1.5em;
  background-color: #ccc;
  margin: 20px;
  padding: 40px;
}

Dette legger 20 piksler med luft på utsiden av h2-elementer, og headeren i seg selv får 40 piksler med padding. Paddingen vises tydelig med bakgrunnsfargen som er satt.

Et element har fire sider, og man kan sette både margin og padding på kun én av sidene, om man ønsker. Til det kan du bruke margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom, padding-left.

Boksmodellen

Boksmodellen

Margin, padding og borders (mer om det på neste side!) utgjør det vi kaller boksmodellen (the Box model). Boksmodellen fungerer slik:

I midten har du et innholdsområdet. La oss si at det er et bilde. Rundt bildet har du en padding, og rundt paddingen har du en border, og rundt borderen har du en margin. Den kan visualiseres slik:

Du trenger ikke å huske alt dette enda, men det kan være hjelpsomt å vite at boksmodellen gjelder for alle elementer på nettsida!