Bilinmesi gereken
- CSS stil sayfanıza, HTML öğelerinin tüm kenar boşluklarını ve dolgu değerlerini sıfıra ayarlayan bir kural ekleyin.
Bu makale, web sayfalarınızın her tarayıcıda tutarlı bir şekilde görüntülenmesi için kenar boşluklarını ve sınırları sıfırlamak için CSS’nin nasıl kullanılacağını açıklar.
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:
class=”ql-syntax”> 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 stil, yapmayı planladığınız şeyi başaracaktır. 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
Internet Explorer’ın eski sürümlerinde, öğelerin etrafında şeffaf veya görünmez bir çerçeve 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, bunu body ve HTML stillerinize aşağıdakileri ekleyerek çözmeniz gerekir: HTML, body {
kenar boşluğu: 0 piksel;
dolgu: 0 piksel;
sınır: 0 piksel;
}
class=”ql-syntax”> Kenar boşluklarını ve dolguyu nasıl kapattığınıza benzer şekilde, bu yeni stil de varsayılan sınırları 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ı, herhangi bir tarayıcılar arası tutarlılığın arzulu bir düşünce olduğu çılgın günlerden çok yol kat etti. 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 bugün web sitelerine erişen sayısız mobil cihazda bulunan çeşitli tarayıcıların en son sürümlerini içerir. 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ıklarıdır. Kutu modelinin bu yönleri tüm HTML öğelerini etkilediğinden ve sayfa düzenlerinin oluşturulmasında önemli olduklarından, tutarsız bir görüntü, bir sayfanın bir tarayıcıda harika görünebileceği, ancak diğerinde biraz uzak görünebileceği anlamına gelir. Bu sorunla mücadele etmek için birçok web tasarımcısı kutu modelinin bu yönlerini normalleştirir. Bu uygulama aynı zamanda olarak da bilinir. sıfırlama kenar boşlukları, dolgu ve kenarlıklar için değerler.
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 kendi projelerinin tasarım ihtiyaçlarına uyacak şekilde değiştirdiği bir şey olsa da, hepsinin aynı varsayılanlarla başlaması, bu değişiklikleri yapmayı kolaylaştırır. 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.
mla apa chicago Alıntınızı Biçimlendirin
Kyrin, Jennifer. “Marjlarınızı ve Sınırlarınızı Sıfırlamak için CSS Nasıl Kullanılır?” Düşünce Şirketi, Mayıs. 14, 2021, thinkco.com/css-zero-out-margins-3464247.
Kyrin, Jennifer. (2021, 14 Mayıs). Kenar Boşluklarınızı ve Sınırlarınızı Sıfırlamak için CSS Nasıl Kullanılır? Https://www.thoughtco.com/css-zero-out-margins-3464247 adresinden erişildi
Kyrin, Jennifer. “Marjlarınızı ve Sınırlarınızı Sıfırlamak için CSS Nasıl Kullanılır?” ThoughtCo. https://www.thoughtco.com/css-zero-out-margins-3464247 (erişim tarihi 29 Mayıs 2021).
