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.

css'te padding ve margin
Büyütmek için resme tıklayınız.

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

css'te padding ve margin
Büyütmek için resme tıklayınız.

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

css'te padding ve margin
Büyütmek için resme tıklayınız.

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

css'te padding ve margin
Büyütmek için resme tıklayınız.

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

css'te padding ve margin
Büyütmek için resme tıklayınız.

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.

css'te padding ve margin
Büyütmek için resme tıklayınız.

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.

css'te padding ve margin
Büyütmek için resme tıklayınız.

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.

css'te padding ve margin
Büyütmek için resme tıklayınız.

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;
        }
    

css'te padding ve margin
Büyütmek için resme tıklayınız.

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.

Diğer derse geçmek için tıklayınız. >>>
Need a light? Beboobeep!