CSS - Margin

Properti margin CSS digunakan untuk membuat jarak disekitar elemen, diluar batas yang ditentukan. 

Dengan CSS, kita memiliki kendali penuh atas margin. Pada margin terdapat properti untuk mengatur setiap sisi elemen margin diantaranya  top, right, bottom, and left.

CSS

.incrud-margin-1 {

  margin : 20px;

}

Elemen pada margin tersebut  memiliki nilai margin 20px di setiap sisi

Margin – di setiap sisi (left,right,top,bottom)

CSS Margin memiliki properti untuk menentukan nilai margin untuk setiap sisi elemen:

margin-top

margin kanan

margin-bottom

margin-kiri

Contoh berikut menetapkan margin yang berbeda untuk keempat sisi elemen <p>:

CSS

.incrud-margin-2 {

  margin-top: 20px;

  margin-bottom: 100px;

  margin-right: 50px;

  margin-left: 80px;

}

Elemen ini memiliki margin yang berbeda di setiap sisi

Margin - Properti Singkat

Untuk mempersingkat kode, dimungkinkan untuk menentukan semua properti margin dalam satu properti.

Berikut  cara penulisannya:

Jika properti margin memiliki empat nilai:

margin: 25px 50px 75px 100px;

maka bisa dikatakan;

margin atas adalah 25px

margin kanan adalah 50px

margin bawah adalah 75px

margin kiri adalah 100px

bisa juga seperti ini;

Jika properti margin memiliki dua nilai:

margin: 25px 100px;

ini berarti ;

margin atas dan bawah 25px

margin kanan dan kiri 100px

p {

  margin: 25px 50px 75px 100px;

}

p {

  margin: 25px 100px;

}

Sekian artikel mengenai CSS margin ,semoga bermanfaat