CSS margin xüsusiyyətləri

Margin xüsusiyyəti elementin ətrafındakı boşluq olaraq təyin olunur. Mənfi dəyər də ala bilər. Ayrı-ayrı xüsusiyyətlər (margin-top, margin-left və s.) olduğu kimi tək bir xüsusiyyətlə (margin) də təyin etmə aparıla bilər. Margin xüsusiyyətlərini anlamaq üçün əvvəlcə Box (qutu) modelinə nəzər salaq.
 

CSS margin xüsusiyyətləri

 
margin-top
margin-right
margin-bottom
margin-left
margin

Yuxarıda göstərilənləri bir-bir nəzərdən keçirək

margin-top
Quruluşu: margin-top: <dəyər>
Aldığı dəyərlər: <uzunluq dəyəri> | <faiz dəyəri> | auto
Başlanğıc dəyəri: 0
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Yoxdur
margin-top xüsusiyyəti elementin üst kənar boşluğunu müəyyən dəyər qədər və ya faiz olaraq təyin edir. Mənfi dəyər ala bilər.
body {
margin-top: 0
}
 
margin-right
Quruluşu: margin-right: <dəyər>
Aldığı dəyərlər: <uzunluq dəyəri> | <faiz dəyəri> | auto
Başlanğıc dəyəri: 0
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Yoxdur
margin-right xüsusiyyəti elementin sağ kənar boşluğunu müəyyən dəyər qədər və ya faiz olaraq təyin edir. Mənfi dəyər ala bilər.
p.diger {
margin-right: 50%
}
 
margin-bottom
Quruluşu: margin-bottom: <dəyər>
Aldığı dəyərlər: <uzunluq dəyəri> | <faiz dəyəri> | auto
Başlanğıc dəyəri: 0
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Yoxdur
margin-bottom xüsusiyyəti elementin alt kənar boşluğunu müəyyən dəyər qədər və ya faiz olaraq təyin edir. Mənfi dəyər ala bilər.
p {
margin-bottom: 10px
}
 
margin-left
Quruluşu: margin-left: <dəyər>
Aldığı dəyərlər: <uzunluq dəyəri> | <faiz dəyəri> | auto
Başlanğıc dəyəri: 0
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Yoxdur
margin-left xüsusiyyəti elementin sol kənar boşluğunu müəyyən dəyər qədər və ya faiz olaraq təyin edir. Mənfi dəyər ala bilər.
p {
margin-left: 12px
}

margin
Quruluşu: margin: <dəyər>
Aldığı dəyərlər: [<uzunluq dəyəri> | <faiz dəyəri> |auto]{1,4}
Başlanğıc dəyəri: Yoxdur
Tətbiq oluna bilən elementlər: Bütün elementlər
İrsilik: Yoxdur
margin xüsusiyyəti yuxarıdakı xüsusiyyətlərin tək bir xüsusiyyətlə tətbiq olunması üçündür.
h2 {
margin: 0.25in;
background-color: silver;
}

h1 {
margin: 10px 20px 15px 5px;
}
yuxarıda h1 üçün margin dəyərləri sırası belədir:

margin: üst sağ alt sol (saat əqrəbi istiqamətində)

İkili və üçlü istifadə də mövcuddur. Bu barədə öncəki dərslərimizin birində də məlumat vermişdik.
h1 {
margin: 0.25em 0 0.5em;
} /* bərabərdir '0.25em 0 0.5em 0' */

h2 {
margin: 0.15em 0.2em;
} /* bərabərdir '0.15em 0.2em 0.15em 0.2em' */

p {
margin: 0.5em 10px;
} /* bərabərdir '0.5em 10px 0.5em 10px' */

p. close {
margin: 0.1em;
} /* bərabərdir '0.1em 0.1em 0.1em 0.1em' */
CSS3