CSS Width ve Height

CSS Width ve Height Kullanımı

Bir HTML Elementinin Genişlik ve Yüksekliğinin CSS ile Ayarlanması

CSS width (genişlik) ve height (yükseklik) özellikleri ile bir elementin genişlik ve yüksekliği ayarlanabilir.

width (genişlik) ve height (yükseklik) özellikleri verilmezse, tarayıcı bu değerleri otomatik olarak ayarlar.

Bu özelliklerin değerleri px veya % cinsinden verilebilir.

Elementin yükseklik ve genişliği, % verildiğinde taşıyıcı elementin boyutuna göre şekillenir.

Pixel olarak genişlik ve yükseklik ayarlamak;

p {
    height: 100px;
    width: 400px;   
}

CSS max-width Özelliği

max-width özelliği bir HTML elementinin maksimum genişliğini belirlemek için kullanılır.

max-width özelliği px,cm veya % gibi bir birim ile değer alır. Varsayılan olarak bir değer ataması yoktur.

Yani element orjinal genişliğinde görüntülenir.

max-width özelliğini bir elementin maksimum genişliğini sınırlamak istediğimizde kullanırız.

Örneğin sayfaya bir resim ekledik. Bu resmin genişliği tarayıcı penceresinin genişliğinden daha genişse o zaman yatayda kaydırma çubuğu (scrollbar) çıkar.

Bu çoğu zaman istenmeyen bir durumdur.  Bu gibi durumların önüne geçmek istediğimizde max-width özelliğini kullanırız.

div {
    max-width: 200px;
    height: 100px;
    background-color: #104B79;
}