HTML TEMELLERİ
HTML5
İLERİ SEVİYE
CSS TEMELİ
css dış kenar boşluğu
css margins overlap
css margins overlapping
css margins are overlapping
css margins explained
css margins inline
css list margins
css margins problem
css margin pushing
css margins style
css margins to align
css outer space
css margin nedir
css margin kullanımı
css margin auto
css margin border
css margin code
css margin help
css margin ne demek
css margin start

CSS Margins(Dış Boşluk)

CSS Margins(Dış Boşluk)

Web sitenizin tasarımını yaparken elementler arasında boşluk olmasını isteyeceksiniz. Aksi takdirde elementleriniz birbirine girecek ve çirkin gözükecektir. Elementlerinize boşluk verirken sağdan şu kadar, soldan şu kadar diyerek uzunluk birimleriyle ayarliyacaksınız. Genelde en çok kullanılan uzunluk biri web ortamı için \'px\' isimli birimdir. Yanı sıra diğer pt, cm, etc şeklinde uzunluk birimlerini arzu ederseniz kullanabilirsiniz. Aşağıdaki örneği incelerseniz, olayın mantığını kavrayacaksınız.

1-Tek Satırda Kullanımı

Yukarıdaki örnekte ayrı ayrı hangi yönden ne kadar boşluk olacağını satır satır yazdık fakat böyle yazmak genelde pek doğru değildir. Tamam, kod çalışır fakat iyi bir yazılımcı bir işi en kısa yoldan yapmalıdır. Yukarıda yazdığımız dört satırı tek bir satırda yazmayı göstereceğim şimdi size. Bu şekilde biraz kafanız karışabilir ama zamanla alışacaksınız..

Css
p { /* tüm p etiketleri */
margin:10px 15px 10px 15px; /*üst sağ aşağı sol*/
}
Html
<html>
<head>
</head>
<body>
<h1>Paragraflarım</h1>
<p class="birinci">Birinci paragraf</p>
<p class="ikinci">İkinci paragraf</p>
<p class="ucuncu">Üçüncü paragraf</p>
</body>
</html>

2-Yatayda Ortalama

Daha önce Html derslerimizde <center> etiketi ile ortalamayı göstermiştik. Benzer bir şekilde yine yatayda istediğimiz içeriği margin ile nasıl yatayda ortalarız onu göstermek istiyorum. Doğru olan esasen nesneleri bu şekilde ortalamaktır. Bu şekilde ortalanan nesneler responsive dediğimiz sitenizin gösterildiği platformda yani tabletinizde telefonunuzda vb. cihazlarda daha düzgün bir şekilde bozulmadan göstermemizin bir parçası olarak görev alır.

Css
.ortala_icerik { /* tüm p etiketleri */
width:250px;
margin: auto;
border: 1px dashed blue;
}
.ortala_baslik{
width:300px;
margin: auto;
}
Html
<html>
<head>
</head>
<body>
<h2 class="ortala_baslik">Margin ile İçerik Ortalama</h2>
<p>
Margin ile Yatayda Ortalama Bu özellik ile istediğiniz içeriği yatay olarak ortalabileceksiniz. Aşağıdaki şekilde yatayda ortalanmış bir paragraf görmektesiniz.
</p>
<p class="ortala_icerik">
Css\'in margin özelliği ile yatayda ortalanmış bir paragraf
</p>
</body>
</html>


Paylaş:

Enes KILIÇ
Webmaster