CSS WEB

CSS Yükseklik ve Genişlik

CSS ile bir HTML öğesinin genişliğini ayarlamak için width, yüksekliğini ayarlamak için heigth özellikleri kullanılır. Bu özelliğe bir değeri vermek istediğinizde bunu auto (otomatik) , piksel cinsinden (px), yüzdelik olarak (%) veya metrik (cm) olarak belirtebilirsiniz. width ve heigth özellikleri kenar çizgilerini (border) ve marjları (margin) içermez; dolgu (padding), içerik (content) boşluğunun içindeki alanın yüksekliğini / genişliğini ayarlarlar!

Örnek;

Aşağıda bir <div> öğesinin genişliği onu kapsayan üst öğe <body> gövdesinin genişliğinin %100’ü olarak gösterilmiştir.

Örnek;

Aşağıdaki örneğimizde ise bir <div> öğesinin yüksekliği 200 piksel, genişliği ise onu kapsayan üst öğenin (<body>) %50’si  olarak gösterilmiştir.

Örnek;

Aşağıdaki örneğimizde bir <div> öğesinin yüksekliği 100 piksel genişliği 500 piksel olarak gösterilmiştir.

max-width Özelliği ile Maksimum Genişlik Ayarlama

max-width Özelliği bir HTML öğesinin sahip olabileceği maksimum genişliğini ayarlamak için kullanılır.

Örnek;

Aşağıdaki örneğimizde bir <div> öğesinin yüksekliği 100 piksel sahip olabileceği maksimum genişliği ise 500 piksel olarak gösterilmiştir. Etkiyi görebilmek için uygulamayı test ediniz ve tarayıcı penceresini daraltıp, genişletiniz.

Not : max-width özelliği width uygulandığı takdirde geçersiz olacaktır.

CSS Kutu Modeli – Box Model – Yazılım Bilişim Programlama için bir cevap yazın X