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.
<!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.
<!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.
<!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.
<!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.
