Skip to content Skip to sidebar Skip to footer
Home / CSS / Web Design

Materi 15 : Width dan Max-Width pada CSS

By Web Design Purbalingga Post a Comment

Width dan Max-width pada CSS – Jika sebuah elemen yang memiliki property width yang diberi nilai yang kita inginkan, maka ia akan memberikan nilai default. Maksudnya adalah  misal satu elemen memiliki lebar 300px maka nilai lebarnya akan tetap 300px tanpa bisa merubah lebarnya pada saat di jalankan pada ukuran web browser yang berbeda. Nah, pada materi kali ini akan kita bahas tentang property max-width pada css.


Width dan Max-width pada CSS

Untuk lebih jelasnya, perhatikan contohnya berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
.baris1 {
    width:500px;
    margin: auto;
    border: 3px solid teal;
}

.baris2 {
    max-width:500px;
    margin: auto;
    border: 3px solid teal;
}
</style>
</head>
<body>

<div class="baris1">Elemen ini memiliki width: 500px;</div>
<br>

<div class="baris2">Elemen ini memiliki max-width: 500px;</div>
</body>
</html>
Coba resize (ubah ukuran lebar) browser yang kalian gunakan. Lalu perhatikan dua elemen di atas. Jika bisa disimpulkan, property max-width bisa digunakan untuk membuat elemen html menjadi lebih responsive.
Sekian materi kali ini tentang Width dan Max-width pada CSS, semoga bermanfaat. Jika ada yang belum jelas, silahkan kirim pertanyaan kalian di kolom komentar di bawah ini dan sampai jumpa di materi berikutnya.

Post a Comment for "Materi 15 : Width dan Max-Width pada CSS"