HTML CSS JAVASCRIPT ANGULAR

CSS Width ve Height


CSS Width ve Height Kullanımı

Bu elementin genişliği:500px ve yüksekliği: 100px

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;

Örnek

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

Kendin Dene »

Not: width (genişlik) ve height (yükseklik) padding, margin ve border'dan gelen değerleri içermez.

Bir elementin kapladığı alanı hesaplamak için bunları da bilmeniz gerekir.


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.

Örnek

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

Kendin Dene »


Anlamadığınız bir konu mu var?

Konu ile ilgili sorunuzu uzmanim.net'e sorabilirsiniz: uzmanim.net'e sor!