Trik pada CSS (Margin, Padding)

CSS
#1

Halo sobat Skilvul :wave:t2: :wave:t2: :wave:t2:

Ada beberapa trik (margin dan padding) yang bisa digunakan saat kita melakukan penulisan css:

  1. 1 value
    Jika kalian hanya mengisi 1 value, maka akan menghasilkan nilai yang sama pada semua valuenya. Trik kalian bisa gunakan untuk margin atau padding dengan cara berikut:

    margin: 10px
    atau penulisan lengkapnya

    margin-top: 10px
    margin-right: 10px
    margin-bottom: 10px
    margin-left: 10px

  2. 2 value
    Jika kalian hanya mengisi 2 value, maka nilai menghasilkan nilai value pertama untuk margin-top dan margin-bottom kemudian value kedua untuk margin-left dan margin-right. Trik kalian bisa gunakan untuk margin atau padding dengan cara berikut:

    margin: 10px 15px
    atau penulisan lengkapnya

    margin-top: 10px
    margin-right: 15px
    margin-bottom: 10px
    margin-left: 15px

  3. 3 value
    Jika kalian hanya mengisi 3 value, maka nilai menghasilkan nilai value pertama untuk margin-top, value kedua untuk margin-left dan margin-right kemudian value ketiga untuk margin-bottom. Pada trik ini kalian bisa menuliskan syntax untuk margin atau padding dengan cara berikut:

    margin: 10px 5px 12px 15px

    atau penulisan lengkapnya

    margin-top: 10px
    margin-right: 5px
    margin-bottom: 12px
    margin-left: 15px

  4. Clockwise Rule (4 value)
    Pada trik ini kalian bisa menuliskan syntax untuk margin atau padding dengan cara berikut:

    margin: 10px 5px 12px 15px

    atau penulisan lengkapnya

    margin-top: 10px
    margin-right: 5px
    margin-bottom: 12px
    margin-left: 15px

Terima kasih

2 Likes