Yazılım Örnekleri

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