- Konu sahibi
- #1
CSS’te
Örneğin bir kutunun içindeki yazı kenara çok yakınsa
Margin dört ayrı yönde tanımlanabilir:
Aynı işlem kısa yazımla da yapılabilir. Değerlerin sırası saat yönündedir: üst, sağ, alt, sol.
Değer sayısına göre anlam şu şekildedir:
Örneğin içerik alanını yatayda ortalamak için genişliği belirli bir blok elementinde sağ ve sol margin değerlerini
Burada üst ve alt margin sıfırlanır, sağ ve sol boşluklar tarayıcı tarafından eşit dağıtılır. Elementin ortalanması için genişliğinin bulunduğu alandan küçük olması gerekir.
Bu örnek, HTML’de kart sınıfına sahip bloklar bulunduğunu varsayar. Kartların başka üst/alt margin kuralları yoksa aradaki mesafeyi
Normal akıştaki değiştirilmemiş satır içi öğelerde üst ve alt margin etkili değildir. Metin içindeki span ile bir blok kart aynı düzen davranışına sahip değildir. İhtiyaca göre satır yüksekliğini veya uygun display düzenini değerlendirin.
margin, bir HTML elementinin dış kenarı ile çevresindeki diğer elementler arasındaki boşluğu belirleyen özelliktir. Elementin kendi içeriğini değil, elementin dışındaki mesafeyi kontrol eder. Örneğin bir başlık ile paragraf arasını açmak, bir kutuyu sayfanın ortasına almak veya bir kartın çevresinde boşluk bırakmak için kullanılır.Margin ile padding farkı
margin elementin dışına boşluk ekler. padding ise elementin içeriği ile kendi kenarı arasındaki iç boşluğu ayarlar. Arka plan rengi ve kenarlık genellikle padding alanını kaplar; margin alanı ise elementin dışındadır.Örneğin bir kutunun içindeki yazı kenara çok yakınsa
padding, iki kutu birbirine çok yakınsa margin kullanılır.Margin nasıl kullanılır?
Margin dört ayrı yönde tanımlanabilir:
CSS:
.kutu {
margin-top: 16px;
margin-right: 24px;
margin-bottom: 16px;
margin-left: 24px;
}Aynı işlem kısa yazımla da yapılabilir. Değerlerin sırası saat yönündedir: üst, sağ, alt, sol.
CSS:
.kutu {
margin: 16px 24px 16px 24px;
}Değer sayısına göre anlam şu şekildedir:
| Yazım | Anlamı | Örnek |
|---|---|---|
| Tek değer | Dört yönün tamamı | margin: 20px; |
| İki değer | Üst-alt / sağ-sol | margin: 10px 20px; |
| Üç değer | Üst / sağ-sol / alt | margin: 10px 20px 30px; |
| Dört değer | Üst / sağ / alt / sol | margin: 10px 20px 30px 40px; |
auto yapabilirsiniz:
CSS:
.container {
width: 80%;
margin: 0 auto;
}Burada üst ve alt margin sıfırlanır, sağ ve sol boşluklar tarayıcı tarafından eşit dağıtılır. Elementin ortalanması için genişliğinin bulunduğu alandan küçük olması gerekir.
width: 100% gibi alanın tamamını kaplayan bir elementte yatayda görünür bir ortalama boşluğu oluşmaz.Somut örnek: kartlar arasında boşluk
CSS:
.kart {
border-radius: 5px;
margin-bottom: 24px;
padding: 16px;
border: 1px solid #ccc;
}Bu örnek, HTML’de kart sınıfına sahip bloklar bulunduğunu varsayar. Kartların başka üst/alt margin kuralları yoksa aradaki mesafeyi
margin-bottom belirler; dikey margin birleşmesi olan bir düzende sonucu ayrıca değerlendirin. Kartın içindeki yazının kenarlardan uzaklığını ise padding belirler. Kutunun dışındaki mesafeyi değiştirmek istiyorsanız margin değerini, içeriğin konumunu değiştirmek istiyorsanız padding değerini düzenleyin.Uygulamada dikkat edilmesi gerekenler
- Önce boşluğun elementin içinde mi dışında mı olması gerektiğine karar verin. İç boşluk için
padding, dış boşluk içinmarginkullanın. - Sadece tek yönde boşluk gerekiyorsa
margin-top,margin-right,margin-bottomveyamargin-leftyazın. Böylece başka yönlerdeki mevcut kuralları istemeden değiştirmezsiniz. - Tek satırda birden fazla yön ayarlıyorsanız değer sırasını üst, sağ, alt, sol olarak kontrol edin.
- Element ortalanmıyorsa
margin: 0 autoile birlikte elementin genişliğini ve display türünü kontrol edin. - Üst ve alt margin değerleri bazı blok düzenlerinde birleşebilir. İki komşu elementin margin değerleri her zaman doğrudan toplanmayabilir; görünen boşluk beklenenden farklıysa ebeveyn, kenarlık, padding veya yeni bir biçimlendirme bağlamı kontrol edilmelidir.
Sık sorulan sorular
Bir span üzerinde margin-top neden satır aralığını açmayabilir?
Normal akıştaki değiştirilmemiş satır içi öğelerde üst ve alt margin etkili değildir. Metin içindeki span ile bir blok kart aynı düzen davranışına sahip değildir. İhtiyaca göre satır yüksekliğini veya uygun display düzenini değerlendirin.
Margin ile element nasıl dikeyde ortalanır?
margin: auto tek başına her düzen türünde dikey ortalama sağlamaz. Dikey ortalama için kullanılan kapsayıcının düzenine göre Flexbox veya Grid gibi bir yerleşim yöntemi kurulmalıdır.