Arkadaşlar, bu yazımda sizlere Margin değerini anlatmaya çalışacağım. Margin; yazınızı yazdığınız bölümün dış tarafındaki boşluğu ayarlamanıza olanak sağlamaktadır. Yani içerikte herhangi bir değişiklik meydana gelmez, içeriğin dış tarafında değişiklikler meydana gelir. Hatırlıyorsanız eğer, Padding'in içerik boşluğuna yaradığını belirtmiş idim. Margin ise içeriğin dış tarafındaki boşluğu ayarlamaktadır. Herneyse, isterseniz şimdi anlatımlarımızı uygulama ile pekiştirelim. İsterseniz siz de boş bir not defteri açarak belirteceğim kodları deneyebilirsiniz. En azından uygulayarak daha sağlıklı bir şekilde öğrenmiş olursunuz diye düşünüyorum.

1) Dış taraftan eşit bir şekilde boşluk bırakma tekniği;

Tekniğin amacı; içeriğin dış tarafından eşit bir şekilde boşluk bırakabilmenize olanak sağlamaktır.

İlgili kodlar;

div#margin1 {
margin:20px;
background:#f5f5f5;
border:1px solid #cccccc;
width:580px;
}
2) Sağ taraftan boşluk bırakma tekniği;

Tekniğin amacı; Dış taraftan boşluk bırakmanıza olanak sağlar. Fakat bu sefer sadece dış tarafa ait olan sağ kısımdan boşluk bırakmış olursunuz.

İlgili kodlar;

div#margin2 {
margin-right:20px;
background:#f5f5f5;
border:1px solid #cccccc;
width:580px;
}
3) Sol taraftan boşluk bırakma tekniği;

Tekniğin amacı; Dış taraftan boşluk bırakmanıza olanak sağlar. Fakat bu sefer sadece dış tarafa ait olan sol kısımdan boşluk bırakmış olursunuz.

İlgili kodlar;

div#margin3 {
margin-left:20px;
background:#f5f5f5;
border:1px solid #cccccc;
width:580px;
}
4) Üst taraftan boşluk bırakma tekniği;

Tekniğin amacı; Dış taraftan boşluk bırakmanıza olanak sağlar. Fakat bu sefer sadece dış tarafa ait olan üst kısımdan boşluk bırakmış olursunuz.

İlgili kodlar;

div#margin4 {
margin-top:20px;
background:#f5f5f5;
border:1px solid #cccccc;
width:580px;
}
5) Alt taraftan boşluk bırakma tekniği;

Tekniğin amacı; Dış taraftan boşluk bırakmanıza olanak sağlar. Fakat bu sefer sadece dış tarafa ait olan alt kısımdan boşluk bırakmış olursunuz.

İlgili kodlar;

div#margin5 {
margin-bottom:20px;
background:#f5f5f5;
border:1px solid #cccccc;
width:580px;
}