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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <style> div { width: 100%; border: 1px solid green; } </style> </head> <body> <div>Bu div öğesinin genişliği 100% değerindedir.</div> </body> </html> |
Ö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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> div { height: 200px; width: 50%; background-color: green; } </style> </head> <body> <div>Bu div öğesinin yüksekliği 200px genişliği ise %50 'dir</div> </body> </html> |
Örnek;
Aşağıdaki örneğimizde bir <div> öğesinin yüksekliği 100 piksel genişliği 500 piksel olarak gösterilmiştir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> div { height: 100px; width: 500px; background-color: powderblue; } </style> </head> <body> <div>Bu div öğesinin yüksekliği 100px, genişliği 500px değerindedir.</div> </body> </html> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <style> div { height: 100px; max-width: 500px; background-color: powderblue; } </style> </head> <body> <div>Bu div öğesinin yüksekliği 100px, maksimum genişliği 500px değerindedir.</div> </body> </html> |
Not : max-width özelliği width uygulandığı takdirde geçersiz olacaktır.
[…] CSS Yükseklik ve Genişlik (width & height) Özellikleri […]
[…] […]