Apa kabar teman-teman? Semoga kita selalu dalam keadaan sehat ya, aamiin. Postingan kali ini saya akan menerangkan tentang height dan width serta b.
Mengatur Tinggi dan Lebar (Height and Width)
Properti height dan width digunakan untuk mengatur tinggi dan lebar elemen.
Height dan width dapat diatur untuk auto (Ini adalah default. Berarti browser yang menghitung tinggi dan lebar), atau akan ditentukan dalam nilai-nilai panjang, seperti px, cm, dll, atau dalam persen (%) dari blok yang mengandung.
Penulisan untuk sebuah elemen yang akan di atur panjang dan tingginya :
div {
height: 100px;
width: 500px;
background-color: green;
}
Pengaturan max-width
Properti max-width digunakan untuk mengatur lebar maksimum dari suatu elemen. Properti max-width dapat ditentukan dalam nilai-nilai panjang, seperti px, cm, dll, atau dalam persen (%) dari blok yang mengandung, atau diatur none (Ini adalah default. Berarti bahwa tidak ada lebar maksimum).
Jika menggunakan max-width lebar elemen yang diatur akan tetap lebarnya, walaupun isi kontennya melebihi lebar. Jadi, isi dari kontennya akan berada melebihi elemen width.
Dalam penulisan max-width, juga sama seperti width biasa, yaitu
div {
max-width: 500px;
height: 100px;
background-color: green;
}
CSS Box Model
Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah "Box Model" digunakan ketika berbicara tentang desain dan tata letak.
CSS Box Model pada dasarnya adalah sebuah kotak yang membungkus di sekitar setiap elemen HTML. Box Model terdiri dari : margin, perbatasan, padding, dan konten yang sebenarnya.
Margin - Menghapus sebuah daerah di luar perbatasan / border. Margin transparan
Border - Sebuah perbatasan yang terjadi di sekitar padding dan konten
Padding - Menghapus sebuah daerah di sekitar konten. Padding transparan
Konten - Isi kotak, di mana teks dan gambar muncul
Lebar dan Tinggi dari Elemen
Untuk mengatur lebar dan tinggi dari suatu elemen dengan benar di semua browser, Anda perlu tahu bagaimana box model bekerja.
Asumsikan kita ingin gaya <div> elemen untuk memiliki lebar total 400px :
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 370px;
padding: 10px;
border: 5px solid black;
margin: 0;
}
</style>
</head>
<body>
<div>Elemen ini memiliki lebar 400px. Dihitung dengan width 370px + padding 20px + border 10px.</div>Sekian postingan saya kali ini tentang height, width, dan box model. Terimakasih, semoga bermanfaat.
</body>
</html>
wassalamualaikum wr. wb.
Referensi :
- http://www.w3schools.com/css/css_dimension.asp
- http://www.w3schools.com/css/css_boxmodel.asp
Tidak ada komentar:
Posting Komentar