padding-top, padding-bottom, padding-left ve padding-right
Bu özelliklerle sırasıyla üst padding, alt padding, sol padding ve sağ padding kalınlıkları belirlenir. Bu özelliklerin karşısına değer olarak uzunluk girilmelidir. Bu özellikler ile yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
padding-left: 40px;
padding-top: 40px;
width: 300px;
}
p.ornek2{
padding-right: 40px;
padding-bottom: 40px;
width: 300px;
}
p.ornek3{
padding-left: 40px;
padding-right: 40px;
width: 300px;
}
p{
border:1px solid red;
}
</style>
</head>
<body>
<p class="ornek1"> 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 class="ornek2"> 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 class="ornek3"> 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>
padding
Tek seferde birden fazla padding için biçimlendirme yapmak için bu özellik kullanılır. Bu özelliğin karşısına değer olarak tek bir uzunluk, iki uzunluk, üç uzunluk veya dört uzunluk değeri girilebilir. Bu durumlarda hangi uzunluğun neyi belirlediği belli kurallara bağlanmıştır.
Tek bir uzunluk değeri girilirse bu değer tüm padding kalınlıkları için geçerli olur. İki tane uzunluk değer olarak girilecek olursa bunlardan ilki üst ve alt padding kalınlıklarını ikincisi sol ve sağ padding kalınlıklarını belirtir. Üç uzunluk girilmesi durumunda ilk değer üst padding kalınlığını, sonraki değer sol ve sağ padding kalınlıklarını, son değer de alt padding kalınlığını belirtir. Dört uzunluk değerinin girilmesi durumunda girilen değerler sırasıyla üst padding, sağ padding, alt padding ve sol padding kalınlığı olur.
padding özelliği ile yapılan biçimlendirmeler de alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
padding: 40px;
}
p.ornek2{
padding: 20px 40px;
}
p.ornek3{
padding: 20px 40px 30px;
}
p.ornek4{
padding: 20px 40px 30px 10px;
}
p{
border:1px solid red;
width: 300px;
}
</style>
</head>
<body>
<p class="ornek1"> 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 class="ornek2"> 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 class="ornek3"> 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 class="ornek4"> 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>
margin-top, margin-bottom, margin-left ve margin-right
Bu özelliklerle sırasıyla üst margin, alt margin, sol margin ve sağ margin kalınlıkları belirlenir. Bu özelliklerin karşısına değer olarak uzunluk girilmelidir. Bu özellikler ile yapılan biçimlendirmeler alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
margin-right: 40px;
float: left;
width: 200px;
}
p.ornek2{
float: left;
width: 200px;
}
p.ornek3{
clear:left;
margin-left: 40px;
}
p.ornek4{
margin-top: 40px;
}
p{
border:1px solid red;
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p>
<p class="ornek2">Örnek Paragraf 1</p>
<p class="ornek3">Örnek Paragraf 1</p>
<p class="ornek4">Örnek Paragraf 1</p>
</body>
</html>
Yukarıdaki örnekte girilen margin değerleri paragraf elemanları arasındaki boşluk olarak gözlemlenebilir.
margin
Tek seferde birden fazla margin için biçimlendirme yapmak için bu özellik kullanılır. Bu özelliğin karşısına değer olarak tek bir uzunluk, iki uzunluk, üç uzunluk veya dört uzunluk değeri girilebilir. Bu durumlarda hangi uzunluğun neyi belirlediği belli kurallara bağlanmıştır.
Tek bir uzunluk değeri girilirse bu değer tüm margin kalınlıkları için geçerli olur. İki tane uzunluk değer olarak girilecek olursa bunlardan ilki üst ve alt margin kalınlıklarını ikincisi sol ve sağ margin kalınlıklarını belirtir. Üç uzunluk girilmesi durumunda ilk değer üst margin kalınlığını, sonraki değer sol ve sağ margin kalınlıklarını, son değer de alt margin kalınlığını belirtir. Dört uzunluk değerinin girilmesi durumunda girilen değerler sırasıyla üst margin, sağ margin, alt margin ve sol margin kalınlığı olur.
margin özelliği ile yapılan biçimlendirmeler de alt elemanlara aktarılmaz.
<!DOCTYPE html>
<html>
<head>
<title>CSS Kutu Modeli</title>
<meta charset="UTF-8">
<style>
p.ornek1{
margin: 40px;
float: left;
width: 200px;
}
p.ornek2{
float: left;
margin: 40px 0px;
width: 200px;
}
p.ornek3{
clear:left;
margin: 0px 40px 0px;
}
p.ornek4{
margin: 40px 0px 0px 0px;
}
p{
border:1px solid red;
}
</style>
</head>
<body>
<p class="ornek1">Örnek Paragraf 1</p>
<p class="ornek2">Örnek Paragraf 1</p>
<p class="ornek3">Örnek Paragraf 1</p>
<p class="ornek4">Örnek Paragraf 1</p>
</body>
</html>
Boyutlar <<<<< CSS3 >>>>> Kenarlıklar