HTML.it - Guida CSS di base - Impostare l'altezza

Usare la proprietà `height`

Questo box non ha un'altezza impostata con height. La sua dimensione verticale è determinata dal suo contenuto.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

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

Questo box ha un'altezza di 200px.

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

Questo box ha un'altezza pari al 50%. Si trova in un box con altezza di 400px. Sarà dunque alto 200px.

<div class="box-3">
 <div class="box-4">
  <p>Questo box ha un'altezza pari al 50% [...]</p>
 </div>
</div>

.box-3 {
 width: 400px;
 height: 400px;
 padding: 10px;
 border: 5px solid #002c53;
 background: #568ec0;
}
.box-4 {
 width: 300px;
 height: 50%;
 padding: 10px;
 border: 1px solid #002c53;
 background: #568ec0;
}

Questo box ha un'altezza impostata con il valore auto. La sua dimensione verticale è determinata dal suo contenuto.

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

HTML.it - Guida CSS di base - Impostare l'altezza

Usare la proprietà height

Usare la proprietà `height`