Kenar Dis Boslugu margin Ozellikleri
Kenar Dışı Boşluğu (Margin) ÖzellikleriKenar Dış Boşluğu (margin) Özellikleri
Kenar dış boşluğu özelliğini bir elemanın etrafındaki boşluk olarak tanımlayabiliriz..
Uzunluk ve Yüzde değerlerini alabileceği gibi negatif (-) değeride alabilir.
Her yön için (yukarı-sağ-aşağı-sol) ayrı tanımlamalar yapıldığı gibi (margin-top, margin-right, margin-bottom, margin-left) tek bir özellik ilede (margin) tanımlama yapılabilir.
Sırasıyla bu özelliklerimi görelim;
Üst kenar dış boşluğu (margin-top)
margin-top özelliği elemanın üst kenar dış boşluğunu belirli bir değer kadar veya yüzde olarak belirler.. Negatif (-) değeride alabilir.
Örnek kullanımı aşağıdaki gibidir;
div {margin-top: 30px}
div {margin-top: 10%}
div {margin-top: -24px}
div {margin-top: 10%}
div {margin-top: -24px}
Sağ kenar dış boşluğu (margin-right)
margin-right özelliği elemanın sağ kenar dış boşluğunu belirli bir değer kadar veya yüzde olarak belirler.. Negatif (-) değeride alabilir.
Örnek kullanımı aşağıdaki gibidir;
div {margin-right: 30px}
div {margin-right: 10%}
div {margin-right: -24px}
div {margin-right: 10%}
div {margin-right: -24px}
Alt kenar dış boşluğu (margin-bottom)
margin-bottom özelliği elemanın alt kenar dış boşluğunu belirli bir değer kadar veya yüzde olarak belirler.. Negatif (-) değeride alabilir.
Örnek kullanımı aşağıdaki gibidir;
div {margin-bottom: 30px}
div {margin-bottom: 10%}
div {margin-bottom: -24px}
div {margin-bottom: 10%}
div {margin-bottom: -24px}
Sol kenar dış boşluğu (margin-left)
margin-left özelliği elemanın sol kenar dış boşluğunu belirli bir değer kadar veya yüzde olarak belirler.. Negatif (-) değeride alabilir.
Örnek kullanımı aşağıdaki gibidir;
div {margin-left: 30px}
div {margin-left: 10%}
div {margin-left: -24px}
div {margin-left: 10%}
div {margin-left: -24px}
Kenar dış boşluğu (margin)
margin özelliği tek bir seferde elemanın kenar boşluklarını tanımlamamızı sağlar.. Sırasıyla 1, 2 ya da 4 değer tanımlanır.. Bu tanımlamalar saat yönüyle bağdaşır.
1 değer tanımlama : Tüm kenarlara vereceğimiz değer aynı ise tek bir tanımlama yeterli olacaktır.
div {margin: 10px}
2 değer tanımlama : Üst-Alt ve Sağ-Sol kenarlarına vereceğimiz kenar dış boşluğu aynı ise 2 değer tanımlanır. İlk değer üst ve alt için ikinci değer sağ ve sol içindiri.
div {margin: 10px 20px}
4 değer tanımlama : Her kenar için özelliğimiz olmasına rağmen tek bir özellikte bunu yazmak istersek 4 değer tanımlarız. Saat yönüne göre sırasıyla üst - sağ - alt - sol değerleridir..
div {margin: 5px 10px 15px 20px}