CSS Konuları
CSS Margin
24/02/2023
CSS margin özelliği bir HTML elementinin kenarlarındaki boşluğun değeridir.
<style>
/* Margin */
.margin-30 {margin: 30px;}
.d-flex {display: flex;}
.first-box, .second-box, .third-box {width: 60px; height: 60px;}
.first-box {background-color: black;}
.second-box {background-color: gray;}
.third-box {background-color: lightgray;}
</style>
<div class="d-flex">
<div class="first-box margin-30"></div>
<div class="second-box"></div>
<div class="third-box"></div>
</div>Element Kenarlarına Farklı Margin Değerleri Atama
Bir elemente margin: 30px; değeri belirtildiğinde elementi sağ-sol ve yukarı-aşağı kenarlarında 30px büyüklüğünde bir boşluk bırakılmış olur, her kenar için farklı ölçülerde boşluklar bırakılabilir.
<style>
/* Aşağıdaki her üç kullanımda da kenarlardan aynı boşluk değeri bırakılır. */
/* 1. Kullanım */
.margin-space {margin: 30px;}
/* 2. Kullanım */
.margin-space {margin: 30px 30px;}
/* 3. Kullanım */
.margin-space {margin: 30px 30px 30px 30px;}
</style>Margin değerlerini belirtirken sırasıyla yukarı, sağa, aşağı ve sola margin değerleri belirlenebilir.
<style>
/*
Yukarı 5px
Sağa 10px
Aşağı 15px
Sola 20px
*/
.margin-space {margin: 5px 10px 15px 20px;}
</style>Yukarı-aşağı ve sağa-sola aynı margin değerini vermek için aşağıdaki yapı kullanılır.
<style>
/*
Yukarı-Aşağı 5px
Sağa-Sola 10px
*/
.margin-space {margin: 5px 10px;}
</style>Tek Kenara Margin Değeri Atama
HTML elementinin sadece bir kenarına margin değeri atamak için margin-top, margin-right, margin-bottom ve margin-left değerleri kullanılabilir.
<style>
.mt {margin-top: 5px;}
.mr {margin-right: 10px;}
.mb {margin-bottom: 15px;}
.ml {margin-left: 20px;}
</style>