HTML.it - Guida CSS di base - Gestire il padding

Proprietà singola in px

Questo box ha il padding sinistro impostato con un valore in pixel.

.box-1 {
 width: 400px;
 height: 200px;
 padding-left: 40px;
 border: 1px solid #002c53;
 background: #568ec0;
}

Proprietà singola espressa in percentuale

Questo box ha il padding superiore impostato con un valore in percentuale.

.box-2 {
 width: 400px;
 height: 200px;
 padding-top: 10%;
 border: 1px solid #002c53;
 background: #568ec0;
}

Uso della proprietà padding con 4 valori

Su questo box abbiamo usato la proprietà abbreviata padding con 4 valori.

.box-3 {
 width: 400px;
 height: 200px;
 padding: 10px 20px 15px 30px;
 border: 1px solid #002c53;
 background: #568ec0;
}

Uso della proprietà padding con 2 valori

Su questo box abbiamo usato la proprietà abbreviata padding con 2 valori.

.box-4 {
 width: 400px;
 height: 200px;
 padding: 20px 15px;
 border: 1px solid #002c53;
 background: #568ec0;
}

Uso della proprietà padding con un solo valore

Su questo box abbiamo usato la proprietà abbreviata padding con un solo valore.

.box-5 {
 width: 400px;
 height: 200px;
 padding: 30px;
 border: 1px solid #002c53;
 background: #568ec0;
}