Css margin ve padding özellikleri

Dıştan boşluk margin

Bir HTML elementi ile çevresindeki diğer html elementleri arasına boşluk boşluk koymaya yarar.

Bu boşlukları üst, sol, alt ve sağ için ayrı ayrı belirleyebildiğimiz gibi tek bir css koduyla da bu boşluları belirleyebilriz.

Tüm margin komutları:
margin-top - Üst kısımdan boşluk bırakır.
margin-right - Sağ kısımdan boşluk bırakır.
margin-bottom - Alt kısımdan boşluk bırakır.
margin-left - Sol kısımdan boşluk bırakır.
margin - Tüm kısımlardan boşluk bırakır.


Alabileceği değerler:

auto - Tarayıcılar tarafından otomatik ayarlanır
px - piksel olarak boşluk belirtme
% - İçerik genişliğine göre yüzdelik oranlama ile


Ayrı Ayrı Dış Boşlukları Ayarlamak


Kod:
.divim
{
margin-top: 20px;
margin-bottom: 20px;

margin-left: 30px;
margin-right: 40px;
}

Yukarıdaki örnekte divin üst  ve alt kısmında 20px, sağ ve sol kısmında 30 piksellik boşluklar bırakacaktır.


Dış Boşlukları Tek Seferde Ayarlarmak için  sırasıyla üst, sağ, alt, sol şeklinde değerler yazarak da 4 bölgeyi tek satırda yazabiliriz.


Kod:
.divim
{
/* Dağılımı: margin: [üst] [sağ] [alt] [sol] */

margin: 20px 30px 20px 30px
}

 

Eğer div dışına vereceğimiz boşlukta yukarı ve alt değerler ile Sağ ve sol değerler aynı olacaksa aşağıdaki şekilde kullanabiliriz.

Kod:
.divim
{
/* Dağılımı: margin: [üst|alt] [sağ|sol] */

margin: 10px 20px;
}

 

 

İçten Boşluk Padding

HTML elementinin kenarlarının içinde boşluk yaratmak istediğimizde padding özelliğini kullanırız.

Bu boşlukları üst, sol, alt ve sağ için ayrı ayrı belirleyebildiğimiz gibi tek bir css koduyla da bu boşluları belirleyebilriz.

Tüm padding komutları:
padding-top - Üst kısımdan boşluk bırakır.
padding-right - Sağ kısımdan boşluk bırakır.
padding-bottom - Alt kısımdan boşluk bırakır.
padding-left - Sol kısımdan boşluk bırakır.
padding - Tüm kısımlardan boşluk bırakır.

 

Padding komutunun Alabileceği değerler: 

genişlik belirtme - px, em, pt gibi ölçülerle
yüzde kullanma (%) - İçerik genişliğine göre yüzdelik oranlama ile

 

 

Kod:
.divim
{
padding-top: 20px;
padding-bottom: 20px;

padding-left: 30px;
padding-right:30px;
}

Yukarıdaki örnekte divin iç kısmında üstten ve alttan 20px, sağ ve soldan 30 piksellik boşluklar bırakacaktır.


İç Boşlukları Tek Seferde Ayarlarmak için  sırasıyla üst, sağ, alt, sol şeklinde değerler yazarak da 4 bölgeyi tek satırda yazabiliriz.


Kod:
.divim
{
/* Dağılımı: padding: [üst] [sağ] [alt] [sol] */

padding: 20px 30px 20px 30px;
}

 

Eğer div içine vereceğimiz boşlukta yukarı ve alt değerler ile Sağ ve sol değerler aynı olacaksa aşağıdaki şekilde kullanabiliriz

Kod:
.divim
{
/* Dağılımı: padding: [üst|alt] [sağ|sol] */

padding: 20px 30px;
}

 

 

Programın Çıktısı

Mesaj ve Yorumlar

Yorum Sayısı (0)

ÜYE YORUMLARI

Çevrimiçi :
7
Günlük :
167
Haftalık :
1008
Aylık :
4150
Copyright © 2012 İşbara Alp Sönmez – Programlama Örnekleri. Her hakkı saklıdır. www.alpsonmez.com Bu sitedeki herhangi bir içeriğin, herhangi bir sitede iznim dışında paylaşım yapılması durumunda hukuki dava açacağımı tarafınıza arz ederim.