Bu yazımızda css margin nedir ve nasıl kullanılır onu öğreneceğiz. Margin css de dış boşluk manasındadır. Yani bir html elementinin diğer elementler arasındaki boşluğu ayarlamak için kullanırız. Daha önceki derslerimizde CSS KUTU Modelinde de değinmiştik. Border dışında kalan kısma deriz.
Bu özelliğe verdiğimiz değerler:
length : Uzunluk değeri veririz. Genelde pixel tercih edilir.
% : Değeri yüzde cinsinden veririz.
auto : Bulundugu konuma göre otomatik değer alır.
initial : Tarayıcının varsayılan değerine döner.
inherit : Bir üst elementten miras alır.
Parametre verirken bir parametre, iki, üç veya dört parametre verebiliriz.
Dört parametre verme yöntemi:
margin: parametre1 parametre2 parametre3 parametre4;1.parametre (top): Html elemanına yukarıdan boşluk vermek için kullanırız.
2.parametre (right): Html elemanına sağdan boşluk vermek için kullanırız.
3.parametre (bottom): Html elemanına aşağıdan boşluk vermek için kullanırız.
4.parametre (left): Html elemanına soldan boşluk vermek için kullanırız.
Dörtlü parametre:
margin: (top) (right) (bottom) (left); Üçlü parametre:
margin: (top) (right-left) (bottom); İki parametre:
margin: (top-bottom) (right-left);Tek Parametre:
margin: (top-bottom-right-left); tek değer ile her tarafına değer veririz.Örnek:
<!doctype html>
<html lang="tr-TR">
<head>
<style>
div {
width: 500px;
height: 50px;
background-color: lightgreen;
border: 2px solid blue;
}
.main {
width: 600px;
height: auto;
background-color: beige;
}
.bir {margin : 0; }
.iki {margin : 10px 15px 20px 25px; }
.uc {margin : 20px 15px 30px; }
.dort{margin : 30px 15px; }
</style>
</head>
<body>
<div class="main">
<div class="bir"> 1 </div>
<div class="iki"> 2 </div>
<div class="uc"> 3 </div>
<div class="dort"> 4 </div>
</div>
</body>
</html>Html Çıktısı:
Arkadaşlar yukarıdaki örnekte “solda alan fazla…” metnini yanlış yazmışım. “Sağda alan…” şeklinde olacaktı. Kusura bakmayın.
Burada önemli olan bir kısımda margin değeri html elementinin genişliği dışında kalır. Border ve padding özellikleri html elementinin genişliğini artırırken margin artırmaz. Eğer border ve padding özelliklerinin genişliği değiştirmesini istemiyorsak box-sizing:border-box; yazarak padding ve border uzunluklarının değeri genişliğin içinde kalır.
css margin-top Nedir? Nasıl Kullanırız?
Html elementinin sadece üst kısmında boşluk bırakmamız gerektiğinde margin-top özelliğini kullanırız. margin özellilğinde olduğu gibi length, %, auto, inherit ve initial değerleri ile verebiliriz. Genelde pixel tercih edilir.
css margin-right Nedir? Nasıl Kullanırız?
Html elementinin sadece sağ tarafında boşluk bırakmamız gerektiğinde margin-right özelliğini kullanırız. margin özellilğinde olduğu gibi length, %, auto, inherit ve initial değerleri ile verebiliriz. Genel olarak margin işlemlerinde pixel tercih ederiz.
margin-bottom Nedir? Nasıl Kullanırız?
Html elementinin sadece alt kısmında boşluk bırakmamız gerektiğinde margin-bottom özelliğini kullanırız. margin özellilğinde olduğu gibi length, %, auto, inherit ve initial değerleri ile verebiliriz. Genel olarak margin işlemlerinde pixel tercih ederiz.
margin-left Nedir? Nasıl Kullanırız?
Html elementinin sadece sol tarafında boşluk bırakmamız gerektiğinde margin-left özelliğini kullanırız. margin özellilğinde olduğu gibi length, %, auto, inherit ve initial değerleri ile verebiliriz. Genel olarak margin işlemlerinde pixel tercih ederiz.
Örnek: margin-top, margin-right, margin-bottom ve margin-left kullanımına örnek yapalım:
<!doctype html>
<html lang="tr-TR">
<head>
<style>
div {
background-color: lightgreen;
border: 20px solid blue;
height: 50px;
width: 300px;
}
.main {
width: 500px;
height: auto;
margin: 10px;
background-color: beige;
border:5px solid black;
}
.main-bir{ display: flex;}
.bir {
margin-top: 30px;
width: 200px;
}
.iki{
margin-right: 50px;
width: 100px;
}
.uc{
margin-bottom:50px;
}
.dort{
margin-left: 60px;
}
</style>
</head>
<body>
<div class="main">
<div class="bir"> margin-top</div>
</div>
<div class="main main-bir">
<div class="iki"> margin-right </div>
<div class="iki"> margin-right </div>
</div>
<div class="main">
<div class="uc"> margin-bottom</div>
</div>
<div class="main">
<div class="dort"> margin-left </div>
</div>
</body>
</html>Html Çıktısı:
Örnek : margin değerlerine auto değeri verme örnekleri:
<!doctype html>
<html lang="tr-TR">
<head>
<style>
div {
width: 500px;
height: 50px;
background-color: lightgreen;
border: 20px solid blue;
}
.main {
width: 600px;
height: auto;
margin: 10px;
background-color: beige;
border:5px solid black;
}
.main-bir{display: flex;}/* iki div i yanyana getirmek için kullandık*/
.bir {
margin :0;
width: 200px;
}
.bir-iki{
margin-left: auto;
width: 200px;
}
.uc{
width: 400px;
margin:0 auto;
}
.dort{
width: 400px;
margin:50px auto;
}
</style>
</head>
<body>
<div class="main main-bir">
<div class="bir"> margin-left-auto örnek 1 </div>
<div class="bir"> margin-left-auto örnek 1</div>
</div>
<div class="main main-bir">
<div class="bir"> margin-left-auto örnek 2 </div>
<div class="bir-iki"> margin-left-auto örnek 2 </div>
</div>
<div class="main">
<div class="uc"> margin auto örneği 1 </div>
</div>
<div class="main">
<div class="dort"> margin auto örneği 2</div>
</div>
</body>
</html>Html Çıktısı:
Margin özelliğine auto vererek yatay da ortalama işlemini sıkça yaparız. Bazen bir div in içinde iki div varsa birinin solda diğerinin tamamen sağa yanaşmasını istiyorsak margin-left değerine auto vererek bunu yapabiliriz.
Eğer bir div içinde yan yana üç veya daha fazla div varsa ve aralarında sabit bir boşluk bırakmak istiyorsak margin-left veya margin-right özelliğine auto vererek yapabiliriz.
Başka bir yazımızda görüşmek üzere…
