CSS Tips

Właściwość Padding

Padding jest odległością od granicy danego elementu HTML do jego zawartości. Jest podoby do marginesu z tą różnicą, że margines jest odległością od jednego elementu HTML do następnego.

Padding można wyrażać w wartościach relatywnych (em, %) i absolutnych (10px).

  padding-top: 15px; (góra)
  padding-left: 10px ; (lewa strona)
  padding-right: 15px; ( prawa strona)
  padding-bottom: 10px; (dół)

Aby uniknąć nadmiernie długiego kodu, powyższy przykład można zapisać:

  padding: 15px 10px 15px 10px;

Jeśli określi się jedynie jedną wartość, dotyczy ona wszystkich stron danego elementu:

#container {
  width: 50%;
  margin: 10px ;
  padding: 30px;
  border: 1px solid #ccc;
  background: #ffffff;
}