Tutorial CSS kali ini menjelaskan Pengaturan Margin HTML dengan CSS . Properti Margin mendefinisikan ruang di sekitar sebuah elemen HTML.
Tutorial CSS kali ini menjelaskan Pengaturan Margin HTML dengan CSS . Properti Margin mendefinisikan ruang di sekitar sebuah elemen HTML. Hal ini dimungkinkan untuk menggunakan nilai-nilai negatif untuk konten overlap .
Nilai-nilai dari properti Margin tidak diwarisi oleh elemen child. Ingat bahwa margin vertikal yang berdekatan (margin atas dan bawah) akan runtuh ke dalam satu sama lain sehingga jarak antara blok bukanlah jumlah dari margin, tetapi hanya lebih besar dari dua margin atau ukuran yang sama sebagai salah satu Margin jika keduanya sama.
Kami memiliki properti berikut untuk mengatur margin elemen :
- margin menentukan properti singkat untuk setting properti margin dalam satu deklarasi.
- Margin-bottom menentukan margin bawah elemen.
- Margin-top menentukan margin atas suatu elemen.
- Margin-left menentukan margin kiri elemen.
- Margin-right menentukan margin kanan elemen.
Sekarang, kita akan melihat bagaimana menggunakan properti ini dengan contoh
Properti Margin
Properti Margin memungkinkan Anda mengatur semua properti untuk empat margin dalam satu deklarasi. Berikut adalah sintaks untuk mengatur Margin sekitar paragraf -
Berikut adalah contoh -
<html> <head> </head> <body> <p style="margin: 15px; border:1px solid black;"> all four margins will be 15px </p> <p style="margin:10px 2%; border:1px solid black;"> top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. </p> <p style="margin: 10px 2% -10px; border:1px solid black;"> top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px </p> <p style="margin: 10px 2% -10px auto; border:1px solid black;"> top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser </p> </body> </html>
Ini akan menghasilkan hasil sebagai berikut:
Properti margin-bottom
Properti margin-bottom memungkinkan Anda mengatur margin bawah dari elemen. Hal ini dapat memiliki nilai length,% atau auto.
Berikut adalah contoh -
<html> <head> </head> <body> <p style="margin-bottom: 15px; border:1px solid black;"> This is a paragraph with a specified bottom margin. </p> <p style="margin-bottom: 5%; border:1px solid black;"> This is another paragraph with a specified bottom margin in percent </p> </body> </html>
Ini akan menghasilkan hasil sebagai berikut:
Properti margin-top
Properti margin-top memungkinkan Anda mengatur margin atas suatu elemen. Hal ini dapat memiliki nilai length,% atau auto.
Berikut adalah contoh -
<html> <head> </head> <body> <p style="margin-top: 15px; border:1px solid black;"> This is a paragraph with a specified top margin </p> <p style="margin-top: 5%; border:1px solid black;"> This is another paragraph with a specified top margin in percent </p> </body> </html>
Ini akan menghasilkan hasil sebagai berikut:
Properti margin-left
Properti margin-left memungkinkan Anda mengatur margin kiri elemen. Hal ini dapat memiliki nilai length,% atau auto.
Berikut adalah contoh:
<html> <head> </head> <body> <p style="margin-left: 15px; border:1px solid black;"> This is a paragraph with a specified left margin </p> <p style="margin-left: 5%; border:1px solid black;"> This is another paragraph with a specified top margin in percent </p> </body> </html>
Ini akan menghasilkan hasil sebagai berikut:
Properti margin-right
Properti margin-right memungkinkan Anda mengatur margin kanan dari elemen. Hal ini dapat memiliki nilai length,% atau auto.
Berikut adalah contoh :
<html> <head> </head> <body> <p style="margin-right: 15px; border:1px solid black;"> This is a paragraph with a specified right margin </p> <p style="margin-right: 5%; border:1px solid black;"> This is another paragraph with a specified right margin in percent </p> </body> </html>
Ini akan menghasilkan hasil sebagai berikut:
COMMENTS