Kenar Boşluklarınızı ve Sınırlarınızı Sıfırlamak için CSS Kullanın

Bu makale nasıl kullanılacağını açıklar CSS sıfırlamak kenar boşlukları ve kenarlıklar, web sayfalarınızın her tarayıcıda tutarlı bir şekilde görüntülenmesi için.

Kenar Boşlukları ve Doldurma için Değerleri Normalleştirme

Tutarsız bir kutu modeli sorununu çözmenin en iyi yolu, HTML öğelerinin tüm kenar boşluklarını ve dolgu değerlerini sıfıra ayarlamaktır. Bunu yapmanın birkaç yolu vardır, bu CSS kuralını stil sayfanıza eklemektir:

Bu kural, harici stil sayfanızda olduğu için spesifik olmasa da, varsayılan tarayıcı değerlerinden daha yüksek bir özgüllüğe sahip olacaktır. Bu varsayılanlar, üzerine yazdığınız şeyler olduğundan, bu tek stil, yapmaya karar verdiğiniz şeyi gerçekleştirecektir.

Tüm kenar boşluklarını ve dolguyu kapattıktan sonra, tasarımınızın gerektirdiği görünümü ve hissi elde etmek için web sayfanızın belirli bölümleri için bunları seçerek tekrar açmanız gerekecektir.

Kenarlıkları Normalleştirmek için CSS Kullanın

Daha eski Internet Explorer'ın sürümleri öğelerin etrafında şeffaf veya görünmez bir kenarlık vardı. Kenarlığı 0'a ayarlamazsanız, bu kenarlık sayfa düzenlerinizi bozabilir. IE'nin bu eski sürümlerini desteklemeye devam etmeye karar verdiyseniz, gövde ve HTML stillerinize aşağıdakileri ekleyerek bu sorunu çözmeniz gerekir:

HTML, gövde {
kenar boşluğu: 0 piksel;
dolgu: 0 piksel;
 sınır: 0 piksel;
}

Kenar boşluklarını ve dolguyu nasıl kapattığınıza benzer şekilde, bu yeni stil de varsayılan kenarlıkları kapatacaktır. Aynı şeyi, makalenin önceki bölümlerinde gösterilen joker karakter seçiciyi kullanarak da yapabilirsiniz.

Web Tasarımında Tutarlı Kenar Boşlukları ve Sınırlar Neden Önemlidir?

Günümüzün web tarayıcısı, her türlü tarayıcılar arası tutarlılığın hüsnükuruntu olduğu çılgın günlerden çok uzaklara geldi. Günümüzün web tarayıcıları tamamen standartlara uygundur. Birlikte güzel oynarlar ve çeşitli tarayıcılarda oldukça tutarlı bir sayfa görüntüsü sunarlar. Bu, Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari ve üzerinde bulunan çeşitli tarayıcıların en son sürümlerini içerir.sayısız mobil cihaz bugün web sitelerine erişim.

Tarayıcıların CSS'yi nasıl gösterdiği konusunda kesinlikle ilerleme kaydedilmiş olsa da, bu çeşitli yazılım seçenekleri arasında hala tutarsızlıklar var. Yaygın tutarsızlıklardan biri, bu tarayıcıların varsayılan olarak kenar boşluklarını, dolguyu ve sınırları nasıl hesapladığıdır.

Kutu modelinin bu yönleri tüm HTML öğelerini etkilediğinden ve sayfa oluşturmada gerekli olduklarından mizanpajlar, tutarsız bir görüntü, bir sayfanın bir tarayıcıda harika görünebileceği, ancak tarayıcıda biraz kapalı görünebileceği anlamına gelir. bir diğeri. Bu sorunla mücadele etmek için birçok web tasarımcısı kutu modelinin bu yönlerini normalleştirir. Bu uygulama olarak da bilinir sıfırlama marj değerleri, dolgu malzemesi, ve sınırlar.

Tarayıcı Varsayılanları Üzerine Bir Not

Web tarayıcılarının her biri, bir sayfanın belirli görüntüleme özellikleri için varsayılan ayarları belirler. Örneğin, köprüler mavidir ve varsayılan olarak altı çizilir. Bu davranış, çeşitli tarayıcılarda tutarlıdır ve çoğu tasarımcının tasarıma uyacak şekilde değiştirdiği bir şey olmasına rağmen özel projelerinin ihtiyaçları, hepsinin aynı varsayılanlarla başlaması gerçeği, bunları yapmayı kolaylaştırıyor. değişir. Ne yazık ki, kenar boşlukları, dolgu ve kenarlıklar için varsayılan değer, aynı düzeyde tarayıcılar arası tutarlılığa sahip değildir.