FrontEnd Developer RoadMap - CSS3 Tutorial 25 Margin Kavramı

Merhabalar, bu yazımda Html içindeki nesnelerin birbirlerine göre konumlanmasını sağlayan margin özelliğine bakacağız.

Margin özelliği sadece block elementlerde çalışır. Inline olan elementler top ve bottom margin değerleri verilse de işlemeyecektir.

Bunun için inline element olup da margin vermek istediğimiz bir durum olursa öncelikle display özelliğini inline-block yapmak gerekir.

Margin block elementlerin hemen yanındaki altındaki üstündeki nesnelere göre yeniden konumlanması işlemini yapar.

Şimdi 3 tane div nesnesi oluşturalım.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
 
        .box {
            width: 100px;
            height: 100px;
        }
 
        #first {
            background-color: purple;
        }
 
        #second {
            background-color: red;
        }
 
        #third {
            background-color: blue;
        }
    </style>
</head>
 
<body>
 
    <div class="box" id="first"></div>
    <div class="box" id="second"></div>
    <div class="box" id="third"></div>
 
    </div>
 
</body>
 
</html>

İstiyorum ki öncelikle bu box’ları yan yana getireyim. Bunu daha önce öğrenmiştim.

.box {
            width: 100px;
            height: 100px;
            float: left;
        }

Şimdi elimizdeki bu div’lerin altına 3 div daha oluşturalım.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
 
        .box {
            width: 100px;
            height: 100px;
            float: left;
        }
 
        #first,#fourth {
            background-color: purple;
        }
 
        #second,#fifth {
            background-color: red;
        }
 
        #third,#sixth {
            background-color: blue;
        }
    </style>
</head>
 
<body>
 
    <div class="box" id="first"></div>
    <div class="box" id="second"></div>
    <div class="box" id="third"></div>
 
    <div class="box" id="fourth"></div>
    <div class="box" id="fifth"></div>
    <div class="box" id="sixth"></div>
 
    
 
</body>
 
</html>

Kodları böyle güncellediğimizde görüntü aşağıdaki gibi oluşur.

Ancak ben istiyorum ki her 3’lü kendi satırında gerçekleşsin.

Bunun için clearfix diye bir sınıf oluşturup şu kodları yazıyorum.

<div class="box" id="first"></div>
    <div class="box" id="second"></div>
    <div class="box" id="third"></div>
 
    <div class="clearfix"></div>
 
    <div class="box" id="fourth"></div>
    <div class="box" id="fifth"></div>
    <div class="box" id="sixth"></div>

.clearfix::after{
            content: "";
            display: block;
            clear: both;
        }

Gördüğünüz gibi body’nin default olarak aldığı bir margin değeri var ve 8px.

Bunu öncelikle giderelim.

body{
            margin: 0px;
        }

Margin değeri top – right – bottom – left şeklinde değer alır.

Eğer margin : 0px; gibi tek değer verirsek bu tüm değerlere 0 verdiğimiz anlamına gelir.

margin: 5px 10px; şeklinde ikili değer verirsek top bottom 5px left right 10 px değerini alır.

margin: 5px 10px 15px 10px; bu şekilde verilirse top – right – bottom – left değerleri sırasıyla uygulanır.

istersek

margin-top:10px; tek tek değerler verebiliriz.

Body’nin margin değerini 0 verdiğimizde bütün kenar boşlukları ortadan kalkar.

Şimdi üstteki ile alttaki bölümlerin arasına boşluk oluşturalım.

Yukardaki kodları aşağıdaki gibi güncelledik.

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <style>
 
        body{
            margin: 0px;
        }
 
        .box {
            width: 100px;
            height: 100px;
            float: left;
        }
 
        #first,#fourth {
            background-color: purple;
        }
 
        #second,#fifth {
            background-color: red;
        }
 
        #third,#sixth {
            background-color: blue;
        }
 
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
 
        .mainbox{
            overflow: auto;
            margin-bottom: 10px;
        }
 
    </style>
</head>
 
<body>
 
    <div class="mainbox">
 
        <div class="box" id="first"></div>
        <div class="box" id="second"></div>
        <div class="box .clearfix" id="third"></div>
 
    </div>
 
    <div class="mainbox">
 
        <div class="box" id="fourth"></div>
        <div class="box" id="fifth"></div>
        <div class="box" id="sixth"></div>
 
    </div>

</body>
 
</html>

İlk kutuları soldan 10px bir birinden uzaklaştıralım.

.box {
            width: 100px;
            height: 100px;
            float: left;
            margin-left: 10px;
        }

Üstten 20px uzaklık verelim.

.box {
            width: 100px;
            height: 100px;
            float: left;
            margin-left: 10px;
            margin-top: 20px;
        }