HTML'de CSS ile boşlukların ve elemanların fiziksel olarak ayrılması
HTML'deki elemanların boşlukları ve fiziksel olarak ayrılması, başlangıç web tasarımcısı için anlaşılması zor olabilir. Bunun nedeni, HTML'nin "boşluk çökmesi" olarak bilinen bir özelliğe sahip olması. HTML kodunuzda 1 boşluk ya da 100 yazmanız gerekse, web tarayıcısı bu alanları otomatik olarak tek bir alana indirir. Bu, Microsoft Word gibi bir programdan farklıdır; bu, belge oluşturucuların söz konusu belgenin sözcüklerini ve diğer öğelerini ayırmak için birden fazla alan eklemesine olanak tanır.
Bu, web sitesi tasarım aralığının nasıl çalıştığı değildir.
Peki, web sayfasında görünen HTML'de whitespaces'ı nasıl eklersiniz? Bu makalede, bazı farklı yollar ele alınmaktadır.
HTML'de CSS ile boşluklar
HTML'nize boşluk eklemenin tercih edilen yolu, Basamaklı Stil Sayfaları'dır (CSS) . Bir web sayfasının görsel yönlerini eklemek için CSS kullanılmalı ve boşluk bir sayfanın görsel tasarım özelliklerinin bir parçası olduğundan, CSS bunun yapılmasını istediğiniz yerdir.
CSS'de, öğelerin etrafında boşluk eklemek için kenar boşluğu veya dolgu özelliklerini kullanabilirsiniz. Ayrıca, metin girintisi özelliği, paragrafların girintilemesi gibi metnin önüne alan ekler.
Tüm paragraflarınızın önüne boşluk eklemek için CSS'nin nasıl kullanılacağı ile ilgili bir örnek aşağıda verilmiştir. Harici veya dahili stil sayfanıza aşağıdaki CSS'yi ekleyin:
p {
metin girintisi: 3em;
}
HTML'deki Alanlar: Metninizin İçinde
Metninize yalnızca iki veya daha fazla boşluk eklemek isterseniz, bu alanı kullanamayan alanı kullanabilirsiniz.
Bu karakter standart bir uzay karakteri gibi davranır, sadece tarayıcının içinde çökmez.
Bir satır metnin içine beş boşluk eklemek için bir örnek:
Bu metin içinde beş ekstra boşluk var
HTML'yi kullanır:
Bu metin & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; İçinde beş ekstra boşluk
Ek satır sonları eklemek için
etiketini de kullanabilirsiniz.
Bu cümlenin sonunda beş satır sonu var
HTML’de Aralık Neden Kötü Bir Fikirdir?
Bu seçeneklerin her ikisi de işe yararken, kırılmayan boşluk öğesi gerçekten de metninize boşluk ekleyecektir ve satır sonları yukarıda gösterilen paragrafın altına boşluk ekleyecektir - bu, web sayfanızda boşluk oluşturmanın en iyi yolu değildir. Bu öğeleri HTML'nize eklemek, görsel stillerden (CSS) bir sayfanın yapısını (HTML) ayırmak yerine görsel bilgileri koda ekler. En iyi uygulamalar, bunların gelecekte güncellenme kolaylığı ve genel dosya boyutu ve sayfa performansı da dahil olmak üzere bir dizi nedenden ayrı olması gerektiğini belirtti.
Tüm stillerinizi ve boşluklarınızı dikte etmek için harici bir stil sayfası kullanırsanız, bu stilleri sitenin stilini güncellemeniz gerektiğinden, sitenin tamamı için bu stilleri değiştirmek kolaydır.
Sonundaki beş
etiketi ile cümlenin yukarıdaki örneğini düşünün. Her paragrafın altındaki boşluk miktarını istediğinizde, bu HTML kodunu sitenizin tamamındaki her paragrafa eklemeniz gerekir. Bu sayfalarınızı şişirecek adil bir fazladan işaretleme miktarıdır.
Ayrıca, bu mesafenin çok fazla veya çok az olduğuna karar verirseniz ve bunu biraz değiştirmek isterseniz, web sitenizdeki her paragrafı düzenlemeniz gerekir. Hayır teşekkürler!
Bu boşluk öğelerini kodunuza eklemek yerine CSS'yi kullanın.
p {
alt dolgu tabanı: 20px;
}
Bir CSS satırı, sayfanızın paragraflarının altında boşluk ekleyecektir. Gelecekte bu aralığı değiştirmek isterseniz, bu bir satırı (sitenizin kodunun tamamı yerine) düzenleyin ve gitmekte fayda var!
Şimdi, web sitenizin bir bölümünde tek bir boşluk eklemeniz gerekiyorsa, bir
etiketi veya tek bir kırılma alanı kullanmak dünyanın sonu değildir, ancak dikkatli olmanız gerekir.
Bu satır içi HTML boşluk seçeneklerini kullanarak kaygan bir eğim olabilir. Bir ya da iki tanesi sitenize zarar vermese de, bu yola devam ederseniz, sayfalarınızda sorunlara yol açacaksınız. Sonunda, HTML aralığı için CSS'ye ve diğer tüm web sayfası görsel gereksinimlerine dönmekten daha iyidir.