Hallo teman-teman, kembali lagi dengan saya di Dumetschool.com tempat kursus terbaik dan nomor satu. Kali ini saya akan membuat artikel tentang Tips Membuat Ukuran Pembungkus Tetap Menggunakan Box Sizing.
Nah, mungkin disini teman-teman sering mengalami perubahan pixel pada header, menu, artikel atau footer ketika ada penambahan padding atau margin sehingga batas sisinya berbeda. Karena ketika kita mengatur satu persatu lebar header, menu, artikel atau footer menggunakan nilai pixelnya, maka secara otomatis ketika kita mau memberikan margin dan padding disalah satu pembungkus tersebut ukuran yang semula 800px menjadi 840px karena adanya penambahan padding atau margin. Maka dari itu disini saya akan bahas tentang Tips Membuat Ukuran Pembungkus Tetap Menggunakan Box Sizing. Pertama, teman-teman bisa buat struktur htmlnya seperti pada script di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Box Sizing</title>
<style type="text/css">
*{padding:0; margin: 0;}
header{margin:auto; width: 900px; background-color: blue;}
menu{margin:auto; width: 900px; background-color: red;}
article{margin:auto; width: 900px; height: 500px; background-color: yellow;}
footer{margin:auto; width: 900px; background-color: green;}
</style>
</head>
<body>
<header>
<h1>Ini adalah header</h1>
</header>
<menu>
<h2>Ini adalah menu</h2>
</menu>
<article>
<h1>Ini adalah artikel</h1>
</article>
<footer>
<h2>Ini adalah footer</h2>
</footer>
</body>
</html>
Nah setelah selesai maka akan seperti pada gambar di bawah ini.
Sekarang saya akan coba tambahkan padding di bagian header dan artikelnya seperti pada script di bawah ini.
header{margin:auto; width: 900px; background-color: blue; padding:20px;}
article{margin:auto; width: 900px; height: 500px; background-color: yellow; padding: 10px;}
Nah, maka secara otomatis pada header dan artikel tidak lagi menjadi 900px karena adanya penambahan padding. Teman-teman bisa lihat pada gambar di bawah ini, batas sisinya berbeda.
Sekarang kita manfaatkan property box-sizing yang ada pada property css. Kita tambahkan pada bagian header dan artikel di cssnya.
Box-sizing : border-box;
Maka secara otomatis lebar pada header dan arikel akan kembali menjadi 900px meski ada penambahan padding atau margin. Nah disini box-sizing membuat penambahan padding atau margin di dalam pembungkusnya tanpa harus mengubah lebar yang sudah kita tentukan. Demikian artikel tentang Tips Membuat Ukuran Pembungkus Tetap Menggunakan Box Sizing. Semoga bermanfaat dan selamat mencoba ya teman.