Margin CSS

Margin adalah area yang ada di sebelah luar border. Settingan margin hampir sama dengan settingan padding.

Pada code CSS dibawah sudah saya tambahkan border untuk memperjelas efek dari modifikasi margin.

Code CSS margin:

p {margin: 15px; border: 1px solid red; }
h4 {margin: 0px; border: 1px solid red;}

Hasil code CSS margin:

Paragraph ini memiliki margin yang sama yaitu 15px untuk setiap sisinya: top, right, bottom, dan left.

Header h4 ini tidak memiliki margin.

Value gabungan

Untuk menentukan semua value sisi margin (top, right, bottom, left) dengan metode value gabungan ini kamu hanya perlu menggunakan satu value saja. Selain menggunakan pixel kamu juga bisa menggunakan persen untuk margin value.

Code CSS value gabungan:

p {margin: 4%; border: 1px solid red; }
h4{margin: 0px; border: 1px solid red;}

Hasil code CSS value gabungan:

Value margin dari paragraph ini adalah 4% untuk setiap sisinya: top, right, bottom, left.

Value margin dari header h4 ini adalah 0 pixel.

Margin-direction

Element margin terbagi menjadi empat yaitu top, right, bottom, left. Dengan metode margin-direction maka kamu bisa menentukan value dari masing-masing sisi margin secara lebih detail.

Code CSS margin-direction:

p { margin-left: 5px; border: 1px solid red; }
h4{ margin-top: 0px;
    margin-right: 2px;
    margin-bottom: 13px;
    margin-left: 21px;
    border: 1px solid red; }

Hasil code CSS margin-direction:

Paragraph ini hanya memakai satu value margin-direction sedangkan margin yang lainnya mengikuti default.

Semua margin value dari header h4 ini dimodifikasi secara detail menggunakan margin-direction.

Kalau kamu hanya menuliskan satu sisi margin saja maka padding yang lainnya akan mengikuti default. Misalkan saja kamu hanya menuliskan margin-top saja sedangkan margin yang lainnya tidak kamu tuliskan.

Value 2 & 4

Value dari empat sisi margin bisa didefinisikan hanya dengan dua value atau empat value.

Saat kamu menggunakan dua value maka value yang pertama untuk margin top dan bottom. Value yang kedua untuk margin left dan right.

Margin dengan empat value bisa kamu gunakan untuk mendefiniskan empat value margin secara berurutan yaitu top, right, bottom, left. Untuk memudahkan mengingatnya kamu bisa bisa membayangkan dengan putaran jam yang berawal dari atas, kanan, bawah, lalu terakhir di kiri.

Contoh di bawah menunjukkan margin dengan dua value dan empat value secara berurutan.

Code CSS margin 2 & 4

p {margin: 5px 15px;
   border: 1px solid red; }
h4{margin: 0px 5px 10px 3px;
   border: 1px solid red;}

Hasil code CSS margin 2 & 4

Value margin pertama dari paragraph ini untuk margin top dan margin bottom. Sedangkan value margin kedua untuk padding left dan right.

Header h4 ini memiliki margin value secara berurutan yaitu top 0px, right 5px, bottom 30px, left 3px.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>