CSS Height Dan Width | Kita Ngoding CSS #10

CSS Height Dan Width | Kita Ngoding CSS #10 |

CSS Height Dan Width.- Tutorial CSS kita pada pada halamn ini yakni bertujuan untuk supaya kita bisa mengatur tinggi dan lebar suatu element dalam css yang kita buat.

Dengan property height dan property width dengan beberapa nilai atau values. Jadi ikuti terus materinya jangan sampai ketinggalan, walupun pembahasan tentang height dan width cukup simple namun penting untuk kita sama ketahui.

CSS Height Dan Width | Kita Ngoding CSS #10 |

Mengatur Height Dan Width

Seperti namanya height dan width adalah property yang digunakan untuk mengatur tinggi dan lebar suatu element html.

Nilai Height Dan Width

Nilai dari height dan width yaitu sebagai berikut :

Auto : ini adalah nilai default dari height dan width. Browser akan menghitung nilainya secara otomatis.
Length : ini untuk memberikan nilai height dan width dalam pixel, cm dan lainnya.
% : memberikan nilai height dan width beberapa present dari block container

Baca Juga : Code Warna Dalam CSS

Contoh CSS Mengatur Height Dan Width

<!DOCTYPE html>
<html>
<head>
  <title>Contoh height dan width</title>
<style> 
h1 {
  border: 5px solid green;
}

div.satu {
  height: 100px;
  width: 600px;
  background-color: lightskyblue;
}
div.dua {
  height: 100px;
  max-width: 600px;
  background-color: lightslategray;
}
</style>
</head>
<body>
  <h1>Mengatur height dan width</h1>
  <div class="satu">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquam, tortor eget tempus</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquam, tortor eget tempus</p>
  </div>
  <div class="dua">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquam, tortor eget tempus</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquam, tortor eget tempus</p>
  </div>
</body>
</html>

Jika kamu perhatikan contoh kode diatas, terdapat dua div continer yang hampir sama. Hanya saja pada div pertama admin menggunakan property width, sementara div kedua admin menggunakan property max-width. Kamu bisa lihat perbedaannya langsung dengan cara melihat outputnya dibawah ini.

Outputnya :

Baca Juga : Struktur Syntax CSS

Terlihat bahwa tulisan dari div container pertama menembus jendela browser, sementara tulisan dari div yang kedua mengikuti jendela browser ketika di minimize.

Mungkin ini saja yang admin bisa share pada kesempatan kali ini, walupun simple namun mungkin bisa berguna dikemudian hari.

CSS Height Dan Width | Kita Ngoding CSS #10 |

Mengatur Height Dan Width

Nilai Height Dan Width

Contoh CSS Mengatur Height Dan Width

0 Response to "CSS Height Dan Width | Kita Ngoding CSS #10 |"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel