css-kenar-bosluklar-margin

CSS Kenar Boşlukları

CSS marginözellikleri, tanımlanmış sınırların dışında elemanlar çevresinde boşluk oluşturmak için kullanılır.

Margin - Bireysel Yönler

CSS, bir öğenin her bir kenarının kenar boşluğunu belirlemek için özelliklere sahiptir:

margin-top

margin-right

margin-bottom

margin-left

Tüm kenar boşluğu özelliklerinde aşağıdaki değerler olabilir:

auto - tarayıcı margin hesaplar

length - px, pt, cm vb. cinsinden bir kenar boşluğu belirtir.

% - içeren öğenin genişliğinin yüzdesi cinsinden bir kenar boşluğu belirtir

inherit - kenar boşluğunun üst öğeden devralınması gerektiğini belirtir.

İpucu: Negatif değerlere izin verilir.

p {

margin-top: 100px;

margin-bottom: 100px;

margin-right: 150px;

margin-left: 80px;

}

Kodu kısaltmak için bir mülkteki tüm kenar boşluklarını belirlemek mümkündür.

Eğer marginözellik dört değer vardır:

margin : 25 piksel 50 piksel 75 piksel 100 piksel;

üst kenar boşluğu 25 pikseldir

sağ kenar boşluğu 50 pikseldir

alt kenar boşluğu 75 pikseldir

sol kenar boşluğu 100 pikseldir

p {

margin: 25px 50px 75px 100px;

}

Eğer margin mülkiyet üç değer vardır:

margin: 25px 50px 75px;

üst kenar boşluğu 25 pikseldir

sağ ve sol kenar boşlukları 50 pikseldir

alt kenar boşluğu 75 pikseldir

p {

margin: 25px 50px 75px;

}

Eğer margin özellik iki değer vardır:

margin : 25px 50px;

üst ve alt kenar boşlukları 25 pikseldir

sağ ve sol kenar boşlukları 50 pikseldir

p {

margin: 25px 50px;

}

Eğer marginözellik bir değeri vardır:

margin: 25 piksellik;

dört kenar boşluğu da 25 pik

p {

margin: 25px;

}



Otomatik değer

Kenar boşluğu özelliklerini auto, kap içindeki öğeyi yatay olarak ortalayacak şekilde ayarlayabilirsiniz .

Eleman daha sonra belirtilen genişliği alacak ve kalan alan sol ve sağ kenar boşlukları arasında eşit olarak bölünecektir:

div {

width: 300px;

margin: auto;

border: 1px solid red;

}



Devralınan Değer

Bu örnek, <p class = "ex1"> öğesinin sol kenar boşluğunun üst öğeden (<div>) devralınmasına olanak tanır:

div {

border: 1px solid red;

margin-left: 100px;

}



p.ex1 {

margin-left: inherit;

}