CSS Ders-7 Dış Boşluk (Margin)
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS Ders-7 Dış Boşluk (Margin)

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2359)
RAPOR ET
CSS derslerimize devam ediyoruz bu derste margin kodunu görecez.Margin ne ondan başlayalım .Margin dış boşluk anlamına geliyo.Mesela bir kutumuz var solda sağa biraz ilerletecez bununla yapabiliriz.En başta anlaması biraz zor.
Şimdi resim üzerinde bir inceleyelim.
http://ustaderslik.com/resim/ders/rcdrv.png
yukarıda sarı olan objemiz margin verdiğimizde 4 tarafa boşluk verir.Objemizin Sağına bir obje daha koyduğumuzda aralarında bir boşluk olur.

Kodlara meçelim.

.kutu{margin:10px}


Yukardaki 4 taraftan 10px boşluk atar.
Biz tek taraflı yada birden çok atmak istiyoruz.Bunun içinde kodlarımız var.

margin-left = Sol tarafa boşluk atar
margin-right =Sağ tarafa boşluk atar
margin-top = Üst tarafa boşluk atar
margin-bottom = Alt tarafa boşluk atar

Yukardakileri kullanarak tek tarflı verebiliriz.

.kutu{margin-left:20px;margin-bottom:15px;}


Bu kodumula soldakine 20px ve alttakine 15 px boşluk attık.

Birde obje ortalamak için margin kullanabiliriz.Bir block olan objeye width verdiğimizde margin:auto; yazarsak bir üst objesine göre ortalanır.

Genel örnek :

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ana{width:190px;background:blue;}
.kutu{width:50px;height:50px;background:red;margin-left:10px;margin-bottom:5px;float:left;}
.temiz{clear:both;}
</style>
</head>
<body>

<div class="ana">
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="temiz"></div>
</div>


</body>
</html>




davmaneydi
davmaneydi 3 Yıl Önce Cevaplandı
Hocam kutucuklar nasıl üçer üçer yan yana oluyor?
Ve temiz class ı ne işe yaradı,
cArleone
cArleone 3 Yıl Önce Cevaplandı



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol