Cara mengatur lebar elemen tag div/margin/span/button dengan CSS
Ketika sedang berada di elemen CSS terkadang kita telah membuat sebuah kotak ,ataupun area div,membuat tombol . Ketika membuat itu terkadang kita ingin mengatur sebuah lebar pada bagian elemen yang saya sebutkan diatas.
Baca Juga Artikel Tentang : Membuat tulisan miring menggunakan CSS
Baca Juga Artikel Tentang : Membuat tulisan miring menggunakan CSS
Width merupakan sintaks atau tag CSS yang digunakan untuk mengatur lebar pada elemen CSS,entah itu elemen membuat kotak,persegi panjang,elemen tag div ataupun span,elemen tombol dan elemen lain-lainya.
Baca Juga Artikel Tentang : Cara Menambahkan Video di HTML
Baca Juga Artikel Tentang : Cara Menambahkan Video di HTML
Penggunaan sintaks width memiliki banyak properti ,ada properti px,ps,em,pt(Point),pc (Pica),%.
Hari ini saya akan share penggunaan sintaks width pada elemen tag div,jika kita tidak menggunakan sintaks width,maka secara default akan mengikuti lebar sebuah margin.
Ini adalah contoh penggunaan tag div tanpa dengan sintaks width :
<!DOCTYPE>
<html>
<head>
<title>https://buayaberdiri.blogspot.com/</title>
<style>
#kotak{
background-color:yellow;
border:double red;
padding:10px;
}
</style>
</head>
<body>
<h1>https://buayaberdiri.blogspot.com/</h1>
<div id="kotak">
<b style="font-size:15px;">Ini kotak</b>
</div>
</body>
</html>
Maka hasilnya akan seperti gambar dibawah ini :
 |
| Tanpa sintaks width dengan elemen div pada CSS |
Kita dapat menggunakan sintaks width untuk mengatur lebar pada kotak tersebut ,sintaksnya adalah :
width:50px;
Kita dapat mengatur nilai propertinya seperti 100px,20px dll, dan kita juga dapat menggunakan selain px yaitu px,ps,em,pt(Point),pc (Pica),%.tapi pada contoh dibawah ini saya akan menggunakan px pada nilai properti ini :
Lihat contoh dibawah ini :
Lihat contoh dibawah ini :
<!DOCTYPE>
<html>
<head>
<title>https://buayaberdiri.blogspot.com/</title>
<style>
#kotak{
background-color:yellow;
border:double red;
padding:10px;
width:70px;
}
</style>
</head>
<body>
<h1>https://buayaberdiri.blogspot.com/</h1>
<div id="kotak">
<b style="font-size:15px;">Ini kotak</b>
</div>
</body>
</html>
Lihat gambar dibawah ini :
 |
| Menggunakan sintaks width pada CSS |
Seperti itulah penggunaan sintaks width pada CSS :)
Gbu :)
Baca Juga Artikel Tentang : Daftar Tag Meta Geo Region - Target Pengunjung blog