CSS kenar boşlukları, bir öğenin etrafında空隙 oluşturarak onu diğer öğelerden ayrıştırmaya yardımcı olur ve ayrıca içeriklerin birbirine çok yakın görünmesini önlemek için sayfa düzenini şekillendirmeye yarar.
Öğelerin etrafındaki dış boşlukları kontrol edin.
Tüm kenarlar için veya ayrı ayrı (üst, sağ, alt, sol) ayarlanabilir.
CSS:
kenar boşluğu (margin): 20 piksel; öğenin dört kenarına da 20 piksellik bir kenar boşluğu uygular.
Sözdizimi (Syntax):
Kenar Boşluğu Değerleri Türleri
Piksel (px): En yaygın birim, sabit bir piksel sayısını belirtir.
Yüzde (%): Kenar boşluğu, içeren öğenin genişliğinin (yatay kenar boşlukları için) veya yüksekliğinin (dikey kenar boşlukları için) yüzdesi olarak hesaplanır.
Diğer birimler: em, rem, vh ve vw gibi daha az yaygın birimler de göreli boyutlandırma için kullanılabilir.
Otomatik: Tarayıcı, genellikle öğeleri ortalamak için kullanılan uygun bir kenar boşluğu boyutu hesaplar.
Not: Kenar boşlukları için negatif değerler de kullanabiliriz.
Margin Özellikleri Değerleri
İşte farklı değerlere sahip kenar boşluğu özelliğinin örnekleri:
4 değerli kenar boşluğu özelliği örneği
Kenar boşluğu özelliği dört değer içeriyorsa, ilk değer üst kenar boşluğunu, ikinci değer sağ kenar boşluğunu, üçüncü değer alt kenar boşluğunu ve dördüncü değer sol kenar boşluğunu ayarlar.
kenar boşluğu: 40 piksel 100 piksel 120 piksel 80 piksel;
üst kenar boşluğu(top margin) = 40 piksel
sağ kenar boşluğu(right margin) = 100 piksel
alt kenar boşluğu(bottom margin) = 120 piksel
sol kenar boşluğu(left margin) = 80 piksel
CSS:
3 değerli kenar boşluğu özelliği örneği
Kenar boşluğu özelliği üç değer içeriyorsa, ilk değer üst kenar boşluğunu, ikinci değer sağ ve sol kenar boşluğunu ve üçüncü değer alt kenar boşluğunu ayarlar.
kenar boşluğu: 40 piksel 100 piksel 120 piksel;
üst = 40 piksel
sağ ve sol = 100 piksel
alt = 120 piksel
CSS:
2 değerli kenar boşluğu özelliği örneği
Kenar boşluğu özelliği iki değer içeriyorsa, ilk değer üst ve alt kenar boşluğuna, ikinci değer ise sağ ve sol kenar boşluğuna uygulanır.
kenar boşluğu: 40 piksel 100 piksel;
üst ve alt = 40 piksel;
sol ve sağ = 100 piksel;
CSS:
1 değerli kenar boşluğu özelliği örneği
Kenar boşluğu özelliği tek bir değere sahipse, bir öğenin tüm kenarlarına dolgu uygular.
kenar boşluğu: 40 piksel;
üst, sağ, alt ve sol = 40 piksel
CSS:
Margin örneği: otomatik özellik
margin: otomatik;
CSS:
margin: auto;: Öğeyi yatay olarak ortalamak için sol ve sağ kenar boşluklarını otomatik olarak ayarlar.
Elemanın margin: auto; işlevinin etkili bir şekilde çalışması için tanımlanmış bir genişliğe sahip olması gerekir.
margin: inherit; Özellik örneği
CSS:
kenar boşluğu: miras;: Alt öğe, üst öğesinin kenar boşluğu değerini devralır.
Bu örnekte, alt öğenin kenar boşluğu, üst öğenin kenar boşluğuyla eşleşen 20 piksel olarak ayarlanmıştır.
Öğelerin etrafındaki dış boşlukları kontrol edin.
Tüm kenarlar için veya ayrı ayrı (üst, sağ, alt, sol) ayarlanabilir.
CSS:
<html>
<head>
<!--MMOZirve Web Geliştirme CSS Eğitim NoxVortex-->
<style>
.box {
margin: 20px ;
}
</style>
<!--MMOZirve Web Geliştirme CSS Eğitim NoxVortex-->
</head>
<body>
<div>
Bu kutunun dikey kenar boşluğu 20px'tir.
</div>
</body>
</html>kenar boşluğu (margin): 20 piksel; öğenin dört kenarına da 20 piksellik bir kenar boşluğu uygular.
Sözdizimi (Syntax):
body { margin: value;}
Kenar Boşluğu Değerleri Türleri
Piksel (px): En yaygın birim, sabit bir piksel sayısını belirtir.
Yüzde (%): Kenar boşluğu, içeren öğenin genişliğinin (yatay kenar boşlukları için) veya yüksekliğinin (dikey kenar boşlukları için) yüzdesi olarak hesaplanır.
Diğer birimler: em, rem, vh ve vw gibi daha az yaygın birimler de göreli boyutlandırma için kullanılabilir.
Otomatik: Tarayıcı, genellikle öğeleri ortalamak için kullanılan uygun bir kenar boşluğu boyutu hesaplar.
Not: Kenar boşlukları için negatif değerler de kullanabiliriz.
Margin Özellikleri Değerleri
İşte farklı değerlere sahip kenar boşluğu özelliğinin örnekleri:
4 değerli kenar boşluğu özelliği örneği
Kenar boşluğu özelliği dört değer içeriyorsa, ilk değer üst kenar boşluğunu, ikinci değer sağ kenar boşluğunu, üçüncü değer alt kenar boşluğunu ve dördüncü değer sol kenar boşluğunu ayarlar.
kenar boşluğu: 40 piksel 100 piksel 120 piksel 80 piksel;
üst kenar boşluğu(top margin) = 40 piksel
sağ kenar boşluğu(right margin) = 100 piksel
alt kenar boşluğu(bottom margin) = 120 piksel
sol kenar boşluğu(left margin) = 80 piksel
CSS:
<html>
<head>
<!--MMOZirve Web Geliştirme CSS Eğitim NoxVortex-->
<style>
p {
margin: 40px 100px 120px 80px;
}
</style>
<!--MMOZirve Web Geliştirme CSS Eğitim NoxVortex-->
</head>
<body>
<p>MMOZirve margin Özellikleri </p>
</body>
</html>3 değerli kenar boşluğu özelliği örneği
Kenar boşluğu özelliği üç değer içeriyorsa, ilk değer üst kenar boşluğunu, ikinci değer sağ ve sol kenar boşluğunu ve üçüncü değer alt kenar boşluğunu ayarlar.
kenar boşluğu: 40 piksel 100 piksel 120 piksel;
üst = 40 piksel
sağ ve sol = 100 piksel
alt = 120 piksel
CSS:
<html>
<head>
<!--MMOZirve Web Geliştirme CSS Eğitim NoxVortex-->
<style>
p {
margin: 40px 100px 120px;
}
</style>
<!--MMOZirve Web Geliştirme CSS Eğitim NoxVortex-->
</head>
<body>
<p>
MMOZirve Web Geliştirme Css Margin Özellikleri
</p>
</body>
</html>2 değerli kenar boşluğu özelliği örneği
Kenar boşluğu özelliği iki değer içeriyorsa, ilk değer üst ve alt kenar boşluğuna, ikinci değer ise sağ ve sol kenar boşluğuna uygulanır.
kenar boşluğu: 40 piksel 100 piksel;
üst ve alt = 40 piksel;
sol ve sağ = 100 piksel;
CSS:
<html>
<head>
<!--MMOZirve Web Geliştirme CSS Eğitim NoxVortex-->
<style>
p {
margin: 40px 100px;
}
</style>
<!--MMOZirve Web Geliştirme CSS Eğitim NoxVortex-->
</head>
<body>
<p>
MMOZirve Web Geliştirme css Margin Özellikleri
</p>
</body>
</html>1 değerli kenar boşluğu özelliği örneği
Kenar boşluğu özelliği tek bir değere sahipse, bir öğenin tüm kenarlarına dolgu uygular.
kenar boşluğu: 40 piksel;
üst, sağ, alt ve sol = 40 piksel
CSS:
<html>
<head>
<style>
p {
margin: 40px;
}
</style>
</head>
<body>
<p>
MMOZirve Web Geliştirme CSS Margin Özellikleri
</p>
</body>
</html>Margin örneği: otomatik özellik
margin: otomatik;
CSS:
<html>
<head>
//MMOZirve Web Geliştirme Css Eğitimi
<style>
div {
margin: auto;
width: 50%;
border: 1px solid black;
text-align: center;
}
</style>
//MMOZirve Web Geliştirme Css Eğitimi
</head>
<body>
<div> //MMOZirve Web Geliştirme Css Eğitimi margin oto mantığı </div>
</body>
</html>margin: auto;: Öğeyi yatay olarak ortalamak için sol ve sağ kenar boşluklarını otomatik olarak ayarlar.
Elemanın margin: auto; işlevinin etkili bir şekilde çalışması için tanımlanmış bir genişliğe sahip olması gerekir.
margin: inherit; Özellik örneği
CSS:
<html>
<head>
<!--MMOZirve Web Geliştirme CSS Eğitim NoxVortex-->
<style>
.parent {
margin: 20px;
}
.child {
margin: inherit;
border: 1px solid black;
}
</style>
<!--MMOZirve Web Geliştirme CSS Eğitim NoxVortex-->
</head>
<body>
<div>
Üst Öge
<div> MMOZirve Web Geliştirme CSS Parent eğitimi </div>
</div>
</body>
</html>kenar boşluğu: miras;: Alt öğe, üst öğesinin kenar boşluğu değerini devralır.
Bu örnekte, alt öğenin kenar boşluğu, üst öğenin kenar boşluğuyla eşleşen 20 piksel olarak ayarlanmıştır.
