Bu öğretici kılavuzda iki konudan bahsedeceğiz: Dış boşluklar ve Dış kenarlar.
İlk olarak dış boşluklarla başlayalım. Bir p öğesi, doğrudan body içinde tanımlandığında, sol ve sağ pencere kenarı için belirtiler, body öğesinin dış sınırlarına olan mesafeyi ifade eder. Ardışık paragraflar da bulunursa, üst ve alt dış kenarlar, paragraflar arasındaki mesafeyi ifade eder.
Dış boşluk ve kenarların tanımlanması sırasında negatif değerler de mümkündür, böylece örtüşmeler elde edilebilir.
Dış boşluğu belirlemek
Dış kenar ve boşluk, mevcut öğe ile onun üst öğesi veya komşu öğesi arasında zorunlu boşluktur. HTML öğelerinde mantıklı olan aşağıdaki CSS özellikleridir ve kendi paragrafı olan veya bir blok oluşturan elemanlar üzerinde kullanılır.
margin bir öğenin dört özelliği margin-top, margin-right, margin-bottom ve margin-leftın kısa formudur. İlgili değerler aşağıdakilerdir:
• auto – dış boşluk otomatik olarak hesaplanır.
• Yüzde değeri – margin belirtilen elemana göre değer alır.
• Uzunluk değeri – negatif değerler de geçerlidir. Böylece öğelerin üst üste binmesi sağlanabilir.
Dört değer kullanılabilir:
• bir değer – dış kenar yukarı, aşağı, sola ve sağa
• iki değer – ilk değer dış kenar yukarı ve aşağı, ikinci değer dış kenar sağ ve sol
• üç değer – ilk değer dış kenar yukarı, ikinci değer dış kenar sola ve sağa, üçüncü değer dış kenar aşağı
• dört değer – ilk değer dış kenar yukarı, ikinci sağ, üçüncü aşağı ve dördüncü sol.
Aşağıdaki örnek genel margin özelliklerinin nasıl kullanılacağını göstermektedir:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
background-color: yellow;
}
p.ex {
margin: 30px 50px 30px 50px;
background-color:#FF99FF;
</style>
</head>
<body>
<p>Kamera-Rig aufbauen</p>
<p class="ex">In diesem Video-Training erfährst du, wie du ein Kamera-Rig erstellst und dieses sicher durch den 3D-Raum bewegst. Eine Projektdatei liegt bei.</p>
</body>
</html>
Bu örnekte iki metin paragrafı tanımlandı.
Ek olarak, ikinci paragrafa boşluklar atandı.
margin: 30px 50px 30px 50px;
Bu ifade şunları ifade eder:
• Yukarıya 30 piksel boşluk
• Sağa 50 piksel boşluk
• Aşağıya 30 piksel boşluk
• Sola 50 piksel boşluk
İç boşluğu belirlemek
İç boşluk, öğe içeriği ile kendi eleman kenarı arasındaki zorunlu boşluktur. Bir paragraf oluşturan HTML özellikleri için yararlı olan aşağıdaki CSS özellikleridir.padding dört özellik padding-top, padding-right, padding-bottom ve padding-leftın kısa formudur. Bu sayede bir öğenin kenarı ile içeriği arasındaki genişlik, yani iç boşluk tanımlanabilir.
• Yüzde değeri – ebeveyn elemana göre değer alır.
• Uzunluk değeri
Her biri için dört değer belirtilebilir:
• bir değer – İç boşluk yukarı, aşağı, sola ve sağa
• iki değer – ilk değer iç boşluk yukarı ve aşağı, ikinci değer iç boşluk sağ ve sol
• üç değer – ilk değer iç boşluk yukarı, ikinci değer iç boşluk sağ ve sol, üçüncü değer iç boşluk aşağı
• dört değer – ilk değer iç boşluk yukarı, ikinci sağ, üçüncü aşağı ve dördüncü sol.
Bu konuda da bir örnek:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;}
p.ex {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>Kamera Rig kurulumu</p>
<p class="ex">Bu video eğitimde bir kamera rig oluşturmayı ve bu rigi 3D alanında güvenli bir şekilde hareket ettirmeyi öğreneceksiniz. Bir proje dosyası eklidir.</p>
</body>
</html>Ve işte tarayıcıdaki sonuç:
İç kenar boşluklarını tanımlamak için dört padding özelliği kullanılabilir. Bunun için aşağıdaki dört CSS özelliği mevcuttur:
• padding-top – İçeriğin üst kenarı ile üst kenar arasındaki boşluk
• padding-bottom – İçeriğin alt kenarı ile alt kenar arasındaki boşluk
• padding-left – İçeriğin sol kenarı ile sol kenar arasındaki boşluk
• padding-right – İçeriğin sağ kenarı ile sağ kenar arasındaki boşluk.
Tüm dört özellik için aşağıdaki değerler kullanılabilir:
• Yüzde değeri – Üst elemana göre belirlenir
• Uzunluk değeri
