CSS'te Padding ve Margin

padding CSS'te hücre içi boşluk, margin ise hücre dışı boşluk anlamındadır. border ise sınır anlamındadır. Metinleri ve diğer içerikleri hizalamak için sıklıkla padding'i, div'leri sayfaya ve birbirleri arasında hizalamak içinse margin'i kullanacağız.

Şimdi daha önceki derslerimizde oluşturduğumuz denemeSitemiz.sln dosyasını çalıştırıyoruz ve projemizi açıyoruz.

Index.cshtml dosyasının içindeki daha önce yazdığımız içeriği siliyoruz.

Görselde görünen kodları yazıyoruz ve _Layout.cshtml dosyamıza dönüyoruz.

Görseldeki gibi tekrar style.css dosyamızı sayfamıza ekliyoruz ve F5'e basıyoruz.

Bu şekilde bir ekran çıktısı elde etmiş olmalıyız.

padding

padding özelliği hücre içi boşluk vermek için kullanılır. Buradaki hücre tanımı <div>'i temsil etmektedir. style.css dosyasına dönüyoruz ve aşağıdaki kodları yazıyoruz.

        div {
            width: 600px;
            height: 300px;
            background-color: goldenrod;
            color: darkslategray;
            font-size: 18px;
            padding: 50px;
        }
    

div elementimize padding özelliğini ve 50px değerini ekledik. Şimdi tekrar F5'e basıyor ev ekran çıktımıza bakıyoruz.

Gördüğünüz gibi dört bir yana 50px'lik bir hücre içi boşluk vermiş olduk.

margin

margin özelliği hücre dışı boşluk vermek için kullanılır. style.css dosyamıza dönüyoruz ve aşağıdaki kodları yazıyoruz.

        div {
            width: 600px;
            height: 300px;
            background-color: goldenrod;
            color: darkslategray;
            font-size: 18px;
            padding: 50px;
            margin: 50px;
        }
    

Çalışan penceremizi F5 ile refresh ediyoruz ve ekran görüntüsünün nasıl değiştiğini inceliyoruz.

Görüldüğü gibi 50px'lik bir hücre dışı boşluk vermiş olduk.

        div {
            width: 600px;
            height: 300px;
            background-color: goldenrod;
            color: darkslategray;
            font-size: 18px;
            padding-left: 50px;
            margin-left: 50px;
        }
    

İsterse bu boşlukları sadece sol tarafa da verebiliriz. Yukarıdaki örnekte sola 50px hücre içi ve dışı boşluk verdik. Ekran görüntümüz ise şu şekilde olacaktır.

Dört bir yana ayrı ayrı hücre içi boşluklar vermek için aşağıdaki kodları kullanabiliriz.

        div {
            width: 600px;
            height: 300px;
            background-color: goldenrod;
            color: darkslategray;
            font-size: 18px;
            padding: 25px 50px 75px 100px;
        }
    

Bu dört sayı saat yönüne göre hesaplanır. 25px padding-top, 50px padding-right, 75px padding-bottom ve 100px padding-left anlamındadır. Sıklıkla kullanılan bir yöntemdir. Aynı şekilde margin içinde bu şekilde hücre dışı boşluklar verebiliriz.

Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.

Bir sonraki dersimizde CSS'te border konusuna değineceğiz.