Halimclskn
cssders10
Ders 10: Margin ve padding
Önceki derste size kutu modeli tanıtıldı. Bu derste, size ayarlayarak elemanların sunum değiştirebilirsiniz nasıl bakacağız marjıve dolgu özellikleri.
Bir eleman olarak kenar
Sağ, sol, üst ve alt: Bir eleman dört tarafı vardır. Marjı her tarafına komşu elemanı (veya belgenin sınırları) için mesafedir.Ayrıca şemasına bakın dersi 9 resmi için.
İlk örnek olarak, size kendisini eleman için yani belge için kenar boşluklarını tanımlamak için nasıl bakacağız <body> . Aşağıdaki resimde bizim sayfalarda kenar boşlukları nasıl olmasını istediğini gösterir.
Aşağıdaki gibi bunun için CSS kod görünecektir:
body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }
Veya daha zarif bir derleme seçebilirsiniz:
body { margin: 100px 40px 10px 70px; }
Neredeyse her eleman aynı şekilde kenar boşluklarını ayarlayabilirsiniz. Örneğin, işaretli bizim metin paragraflarının tüm kenar boşluklarını tanımlamak için seçebilirsiniz <p> :
body { margin: 100px 40px 10px 70px; } p { margin: 5px 50px 5px 50px; }
Bir eleman doldurma Set
Dolgu de "dolgu" olarak anlaşılabilir. Dolgu diğer öğeleri için öğe mesafeyi etkiler ancak sınır ve elemanın içeriği arasındaki iç mesafeyi tanımlar değil bu mantıklı.
Padding kullanılarak tüm başlıkları arka plan renkleri var, basit bir örneğe bakarak gösterilebilir:
h1 { Arka plan: sarı; } h2 { Arka plan: turuncu; }
Başlıkları için dolgu tanımlayarak, her bir başlık metni etrafında olacak ne kadar dolum değiştirin:
h1 { Arka plan: sarı; padding: 20px 20px 20px 80px; } h2 { Arka plan: turuncu; padding-left: 120px; }
Özet
Eğer CSS kutu modeli ana yolda şimdi. Bir sonraki derste, daha yakın bir farklı renklerde sınırları ayarlamak için nasıl bakmak ve nasıl öğeleri şekillendirmeye alacaktır.
