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ğı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> |
| 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> |