HTML'de boşluklar oluşturmak ve öğelerin fiziksel olarak ayrılmasını sağlamak, başlangıç web tasarımcısı için anlaşılması zor olabilir. Bunun nedeni ise HTML "boşluk daraltma" olarak bilinen bir özelliğe sahiptir. HTML kodunuzda 1 veya 100 boşluk yazsanız da, web tarayıcısı bu boşlukları otomatik olarak tek bir boşluk olacak şekilde daraltır. Bu gibi bir programdan farklı Microsoft Word, belge oluşturucuların sözcükleri ve o belgenin diğer öğelerini ayırmak için birden çok boşluk eklemesine olanak tanır. Web sitesi tasarım aralığı bu şekilde çalışmaz.
Peki, HTML'de görünen boşlukları nasıl eklersiniz? oluşturduğunuz web sayfası? Bu makale farklı yollardan bazılarını incelemektedir.
CSS ile HTML'de Boşluklar
HTML'nize boşluk eklemenin tercih edilen yolu Basamaklı Stil Sayfaları (CSS). Bir web sayfasının herhangi bir görsel yönünü eklemek için CSS kullanılmalıdır ve boşluk, bir sayfanın görsel tasarım özelliklerinin bir parçası olduğundan, bunun yapılmasını istediğiniz yer CSS'dir.
CSS'de, öğelerin etrafına boşluk eklemek için kenar boşluğu veya dolgu özelliklerini kullanabilirsiniz. Ayrıca, text-indent özelliği, örneğin paragrafları girintilemek için olduğu gibi metnin önüne boşluk ekler.
İşte tüm paragraflarınızın önüne boşluk eklemek için CSS'nin nasıl kullanılacağına dair bir örnek. Aşağıdaki CSS'yi dosyanıza ekleyin harici veya iç stil sayfası:
p {
metin girintisi: 3em;
}
Metninizin İçinde HTML'de Boşluklar
Metninize yalnızca bir veya iki boşluk eklemek istiyorsanız, bölünmeyen boşluğu kullanabilirsiniz. Bu karakter tıpkı standart bir boşluk karakteri gibi davranır, ancak tarayıcının içinde çökmez.
Bir metin satırının içine nasıl beş boşluk ekleneceğine dair bir örnek:
Bu metnin içinde fazladan beş boşluk var
HTML'yi kullanır:
Bu metnin içinde fazladan beş boşluk var
Ayrıca
fazladan satır sonları eklemek için etiket.
Bu cümlenin sonunda beş satır sonu var
HTML'de Boşluk Vermek Neden Kötü Bir Fikirdir?
Bu seçeneklerin her ikisi de işe yarasa da - bölünmeyen boşluk öğesi gerçekten de metninize ve satırınıza boşluk ekler molalar, yukarıda gösterilen paragrafın altına boşluk ekler - bu, boşluk oluşturmanın en iyi yolu değildir. web sayfası. Bu öğeleri HTML'nize eklemek, bir sayfanın yapısını (HTML) görsel stillerden (CSS) ayırmak yerine koda görsel bilgiler ekler. En iyi uygulamalar, bunların gelecekte güncelleme kolaylığı ve genel dosya boyutu ve genel dosya boyutu da dahil olmak üzere çeşitli nedenlerle ayrı olması gerektiğini belirtir. sayfa performansı.
Tüm stillerinizi ve aralığınızı dikte etmek için harici bir stil sayfası kullanırsanız, bu stilleri sitenin tamamı için değiştirmek kolaydır, çünkü tek bir stil sayfasını güncellemeniz yeterlidir.
Beşli cümlenin yukarıdaki örneğini düşünün
sonundaki etiketler. Her paragrafın altında bu kadar boşluk olmasını istiyorsanız, bu HTML kodunu sitenizin tamamındaki her paragrafa eklemeniz gerekir. Bu, sayfalarınızı şişirecek makul miktarda ekstra işaretlemedir. Ek olarak, bu aralığın çok fazla veya çok az olduğuna karar verirseniz ve biraz değiştirmek isterseniz, web sitenizin tamamındaki her bir paragrafı düzenlemeniz gerekir. Hayır teşekkürler!
Bu boşluk öğelerini kodunuza eklemek yerine CSS kullanın.
p {
alt dolgu: 20 piksel;
}
Bu bir CSS satırı, sayfanızın paragraflarının altına boşluk ekler. Gelecekte bu aralığı değiştirmek isterseniz, (sitenizin kodunun tamamı yerine) bu satırı düzenleyin ve hazırsınız!
Şimdi, web sitenizin bir bölümüne tek bir boşluk eklemeniz gerekiyorsa, bir
etiketi veya tek bir bölünmeyen boşluk dünyanın sonu değil, ancak dikkatli olmanız gerekiyor. Bu satır içi HTML aralığı seçeneklerini kullanmak kaygan bir eğim olabilir. Bir veya iki tanesi sitenize zarar vermeyebilir, ancak bu yolda devam ederseniz, sayfalarınıza sorunlar getirirsiniz. Sonunda, HTML aralığı ve diğer tüm web sayfası görsel ihtiyaçları için CSS'ye dönmeniz daha iyi olur.