Mengatur Lebar dan Tinggi CSS Box Model

CSS

Property penting yang ada pada CSS Box Model yaitu setting lebar dan tinggi pada object yang dibuat. Untuk itu rasanya cukup penting berbagi catatan ini agar anda bisa mndapatkan tampilan yang sesuai dengan yang anda inginkan pada halaman website. Berikut tentang pengaturan width- dan height pada object CSS (CSS Box Model).

1) Pengaturan Width pada CSS Box Model

Element CSS yang akan di atur berupa tampilan sebauh HTML (gambar, paragraf dll). Dengan pemberian property object width ini anda bisa mengatur tampilan lebar pada tampilan objek tersebut. Untuk melakukan hal ini digunakan properties width dengan value berupa angka dengan satuan px, % ataupun em.

Sebagai contoh, saya ingin membuat beberapa objek berupa kotak dengan border merah dan background hijau. Maka akan ditulis : *perhatikan pada bagian CSS / kode yang saya warnai biru.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
div {
height: 50px;
border: 2px solid red;
margin: 20px;
color: white;
background-color: green;
}
.box1 { width: 12px;}
.box2 { width: 52px;}
.box3 { width: 102px;}
.box4 { width: 502px;}
.box5 { width: 1002px;}
</style>
</head>
<body>
<div class="box1">Lebarnya 12px</div>
<div class="box2">lebar 52px</div>
<div class="box3">lebar 102px</div>
<div class="box4">lebar 502px</div>
<div class="box5">lebar 100px</div>
</body>
</html>

Pada contoh diatas bisa dilihat bagaimana tampilan panjang kotak yang saya inginkan. Namun agar lebih responsive sebaiknya digunakan ukuran value dengan satuan %. Karena ini akan menyesuaikan dengan tampilan browser anda.

Lalu bagaimana penerapannya dalam sebuah sebauh object HTML. Anda bisa mencoba menjalankan kode di bawah ini dimana diterapkan pada pengaturan lebar paragraf.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
.paragraf2 { width: 400px;}
.paragraf3 { width: 50%;}
</style>
</head>
<body>
<p><b> Normal tanpa di atur lebarnya :</b>
Dua gabus berjarak 15m berada di antara 2 puncak gelombang yang di batasi oleh 3 lembah. Jika waktu yang dibutuhkan gabus pertama menempati posisi gabus kedua adalah 10s.
</p>
<p class="paragraf2"> <b> Lebarnya diatur dengan satuan Pixel:</b>
Dua gabus berjarak 15m berada di antara 2 puncak gelombang yang di batasi oleh 3 lembah. Jika waktu yang dibutuhkan gabus pertama menempati posisi gabus kedua adalah 10s.
</p>
<p class="paragraf3"><b> lebar di atur dngan satuan % </b>
Dua gabus berjarak 15m berada di antara 2 puncak gelombang yang di batasi oleh 3 lembah. Jika waktu yang dibutuhkan gabus pertama menempati posisi gabus kedua adalah 10s.
</p>
</body>
</html>

Ketika Anda jalankan. Kemudian lakukan pengubahan ukuran browser. Untuk bagian (1) karena tampilan default akan selalu mengikuti browser, namun tulisan tersebar dari ujung sampai akhir Browser. Pada bagian (2), lebar paragraf akan selalu tetap. Meskipun tampilan browser anda perlebar/persempit. Kemudian untuk yang (3) dimana di atur dengan value satuan %, paragraf akan menyesuaikan diri lebarnya sesuai lebar browser, lebar paragraf tersebut selalu 1/2 lebar browser (karena di atur dengan lear 50%).

2) Pengaturan Height pada CSS Box Model

Bagian height atau tinggi adalah ukuran kiri-kanan sebuah box model pada sebauh objek CSS. Struktur penulisannya hampir sama dengan penulisan width di atas. Anda hanya tingal mengganti width dengan properties height,

Property ini biasa akan digabung dengan width dalam penggunaanya. Ini akan menentukan lebar dan tinggi sebuah object agar terlihat proporsional tampilannya. Sebagai contoh kita akan menampilkan sebuah object berupa gambar (image) pada halaman website. Sebagai contoh anda inginmenmapilkan sebauh gambar dari dengan url : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSwAYr9-SuA4VxrUj_XJix5xmPB8RUxE_PtULoFGpHC5uO1cDX-5qBK9AbTKSlai08mIBIJRv28eV502-BuJ-8fz6YTGRGYUKKZWv5_BD8IKDKMIjS19mP4jVb0b7VB-qwbXCMdrH6VT4/s320/analisis+statistik.jpg (atau gambar yang bisa anda upload sendiri nanti pada website).

<!DOCTYPE html>

<html>

<head>

<title>Belajar CSS</title>

<style>

div {

border: 2px solid black;

margin: 20px;

background-color: yellow;

}

.gambar2 { width: 90px; height: 90px;}

.gambar3 { width: 100px;}

.gambar4 { height: 150px;}

</style>

</head>

<body>

</body>

</html>

Gambar 1 menampilkan gambar dengan ukuran sebenarnya, tanpa adanya pengaturan width-height. Pada gambar 2 di atur dengan width dan height 90px. Untuk gambar 3 dan 4 ditetapkan sesuai dengan ukuran yang bisa anda lihat pada kode di atas. Dari contoh ini bisa anda pahami apa kegunaan tinggi dan lebar sebuah objek di atur dalam sebauh website bukan?

Share Yuk

Facebook Twitter Linkedin

Mengatur Lebar dan Tinggi CSS Box Model

1) Pengaturan Width pada CSS Box Model

2) Pengaturan Height pada CSS Box Model

Related Posts

No comments:

Post a Comment