width
Bu özellik ile bir elemanın içerik kısmının genişliği ayarlanır. Bu özellik ile yapılan biçimlendirmeler alt elemanlara aktarılmaz. Bu özellik ile belirtilen genişlik padding, kenarlık ve margin boyutlarını içermez. Varsayılan değer auto değeridir ve genişliğin tarayıcı tarafından otomatik olarak belirlenmesini sağlar, bunun dışında girilebilecek değerler uzunluk olmalıdır.
height
Bu özellik ile bir elemanın içerik kısmının yüksekliği ayarlanır. Bu özellik ile yapılan biçimlendirmeler alt elemanlara aktarılmaz. Bu özellik ile belirtilen yükseklik padding, kenarlık ve margin boyutlarını içermez. Varsayılan değer auto değeridir ve yüksekliğin tarayıcı tarafından otomatik olarak belirlenmesini sağlar, bunun dışında girilebilecek değerler uzunluk olmalıdır.
<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
width: 300px;
height: 300px;
}
p.ornek2{
width: 100px;
height: 500px;
}
p.ornek3{
width: 500px;
height: 100px;
}
p{
border:1px solid red;
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p><br>
<p class="ornek2">Örnek Paragraf 2</p><br>
<p class="ornek3">Örnek Paragraf 3</p><br>
</body>
</html>
max-width
Bu özellik ile elemanın içerik kısmının sahip olabileceği maksimum genişlik belirtilir. Varsayılan değer none değeridir ve eleman için bir maksimum genişlik belirtilmediği manasına gelir. Maksimum genişlik belirtmek için bu özelliğin karşısına değer olarak bir uzunluk girilmelidir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek{
max-width: 200px;
}
p{
border: 1px solid red;
}
</style>
</head>
<body>
<p class="ornek">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>
Yukarıdaki örnekte ilk paragraf için maksimum genişlik sınırı belirtilmiştir. Bu sınıra ulaşıldığında yazılar alt satıra geçmektedir.
min-width
Bu özellik ile elemanın içerik kısmının sahip olabileceği minimum genişlik belirtilir. Varsayılan değer none değeridir ve eleman için bir minimum genişlik belirtilmediği manasına gelir. Minimum genişlik belirtmek için bu özelliğin karşısına değer olarak bir uzunluk girilmelidir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek{
min-width: 500px;
}
p{
border: 1px solid red;
}
</style>
</head>
<body>
<p class="ornek">Örnek Paragraf 1</p><br>
<p>Örnek Paragraf 2</p><br>
</body>
</html>
Yukarıdaki örnekte ilk paragraf için minimum genişlik sınırı belirtilmiştir. Bu sınırlamanın etkisini görmek için kodu çalıştırdıktan sonra pencereyi küçültün. Pencere genişliği 500px altına düştüğünde alttaki paragrafın genişliğinin düştüğü ama üsttekinin artık azalmadığı görülecektir.
max-height
Bu özellik ile elemanın içerik kısmının sahip olabileceği maksimum yükseklik belirtilir. Varsayılan değer none değeridir ve eleman için bir maksimum yükseklik belirtilmediği manasına gelir. Maksimum yükseklik belirtmek için bu özelliğin karşısına değer olarak bir uzunluk girilmelidir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek{
max-height: 200px;
}
p{
border: 1px solid red;
}
</style>
</head>
<body>
<p class="ornek">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</body>
</html>
Yukarıdaki örnekte ilk paragraf için maksimum yükseklik sınırı belirtilmiştir. Bu sınırlamanın etkisini görmek için kodu çalıştırdıktan sonra pencereyi küçültün. Pencere genişliği yeterince azaldığında alttaki paragrafın yüksekliğinin artmaya devam ettiği, ama üsttekinin artık artmadığı ve içeriğin taştığı görülecektir.
min-height
Bu özellik ile elemanın içerik kısmının sahip olabileceği minimum yükseklik belirtilir. Varsayılan değer none değeridir ve eleman için bir minimum yükseklik belirtilmediği manasına gelir. Minimum yükseklik belirtmek için bu özelliğin karşısına değer olarak bir uzunluk girilmelidir. Bu özellikle yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek{
min-height: 500px;
}
p{
border: 1px solid red;
}
</style>
</head>
<body>
<p class="ornek">Örnek Paragraf 1</p><br>
<p>Örnek Paragraf 2</p><br>
</body>
</html>
Yukarıdaki örnekte ilk paragraf için minimum yükseklik sınırı belirtilmiştir. İçerik bu kadar yükseklik gerektirmese bile elemanın yüksekliği en az 500px olacaktır.
box-sizing
Normalde uzunluk ve kalınlık değerleri sadece içerik kısmının boyutunu belirtir. Bu özellik kullanılarak belirtilen boyut değerlerinin padding ve kenarlıkları da içermesi sağlanabilir. Varsayılan değer boyutların sadece içeriğin boyutunu belirlediği content-box değeridir. border-box değeri kullanıldığında boyutlar padding ve kenarlıkları da içerir.
<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
box-sizing: content-box;
width: 150px;
height: 50px;
border: 5px solid red;
}
p.ornek2{
box-sizing: border-box;
width: 150px;
height: 50px;
border: 5px solid red;
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p><br>
<p class="ornek2">Örnek Paragraf 2</p><br>
</body>
</html>
Yukarıdaki örnekte ilk paragrafın sadece içeriğinin uzunluğu 150px ve yüksekliği 50px'tir. İkinci paragrafın ise padding ve kenarlıklarla birlikte içeriğin uzunluğu 150px ve yüksekliği 50px'tir. Bu nedenle alttaki paragraf daha küçük görüntülenecektir.
resize
Bu özellikle elemanların büyütülüp küçültülebilir olması sağlanır. Varsayılan değer none değeridir ve bu değer kullanıldığında eleman büyütülüp küçültülemez. both değeri kullanıldığında eleman dikey ve yatay doğrultuda yeniden boyutlandırılabilir. horizontal değeri sadece yatay boyut değişikliğine izin verirken vertical değeri sadece dikey yönde boyut değişikliğine izin verir. none dışında bir değer kullanıldığında boyut değişikliği için elemanın sağ alt köşesinde bir simge belirir.
Bu özelliğin çalışması için overflow özelliğinin değeri visible dışında bir değer olmalıdır. Ayrıca bu özellik yazının yazıldığı an itibarı ile Internet Explorer tarafından desteklenmemektedir.
<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
width: 150px;
height: 50px;
border: 1px solid red;
resize: none;
}
p.ornek2{
width: 150px;
height: 50px;
border: 1px solid red;
resize: both;
}
p.ornek3{
width: 150px;
height: 50px;
border: 1px solid red;
resize: horizontal;
}
p.ornek4{
width: 150px;
height: 50px;
border: 1px solid red;
resize: vertical;
}
p{
overflow: auto;
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p><br>
<p class="ornek2">Örnek Paragraf 2</p><br>
<p class="ornek3">Örnek Paragraf 3</p><br>
<p class="ornek4">Örnek Paragraf 4</p><br>
</body>
</html>
Kutu Modeli <<<<< CSS3 >>>>> Padding ve Margin