HTML TEMELLERİ
HTML NEDİR ? HTML Başlık(Heading) HTML Paragraf(Paragraphs) HTML Yazı Stili(Font Style) HTML Yazı Formatları(Format Text) HTML Renk Kodları(Color Codes) HTML Link Verme-Ekleme HTML Resim Ekleme(Add a Image) HTML Tablo Ekleme(Add a Table) HTML Liste Ekleme(Add a List) HTML Web Site Penceresi Ekleme(Iframe) HTML Head ve Meta Etiketleri HTML Semboller(Symbols) HTML Form HTML Form Elemanları(Form Elements) HTML Form Giriş Özellikleri (Form Input Properties)
HTML5
İLERİ SEVİYE
HTML 5 NEDİR? HTML Sayfa Bölümleri HTML Form Giriş(Input) Özellikleri HTML Form Elementleri HTML Form Özellikleri(Form Properties) HTML Canvas Kullanımı HTML SVG Kullanımı HTML Video Ekleme-Oynatma(Video Player) HTML Ses Ekleme-Oynatma(Audio Player)
CSS TEMELİ
CSS NEDİR ? CSS CSS-HTML İlişkisi CSS Backgrounds(Arkaplan) CSS Border(Kenarlık) CSS Margins(Dış Boşluk) CSS Padding(İç Boşluk) CSS Height and Width(Yükseklik ve Genişlik) CSS Box Model(Kutu Modeli) CSS Outline(Dış Çizgi) CSS Text(Metin) CSS Fonts(Yazı) CSS Icons(Ikon) CSS Links CSS List(Liste) CSS Tables(Tablolar) CSS Display(Görüntü-Ekran) CSS Layout - Width and Max-width(Yerleşim - Genişlik ve Max Genişlik) CSS Positon(Durum) CSS Overflow(Taşma) CSS Layout-Float and Clear(Yerleşim - Yön ve Temizliği) CSS Image Opacity / Transparency(Opaklık/Saydamlık) CSS Navigation Bar(Gezinme Menüsü)
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