Apakah kamu pernah mendengar istilah CSS Box Model? Apa sih sebenarnya CSS Box Model ini? Pada blog kali ini, akan kita telusuri apa sebenarnya CSS Box Model ini.
Apa itu CSS Box Model?
Dalam dunia CSS, secara sederhana Box Model adalah sebuah kotak yang melingkupi sebuah elemen HTML, seperti Padding, Border, dan Margin.
- Padding: jarak antara konten elemen HTML dengan Border, dan transparan
- Border: sebuah pembatas di antara Padding dan Margin, dan bisa diberikan CSS styling seperti Width, Color, dan semacamnya
- Margin: jarak antara Border dengan area luar, dan transparan
Dengan kata lain, Box Model dapat membantu kita mengatur jarak antara satu elemen dengan elemen yang lainnya. Website ini juga menyediakan sebuah tool yang bernama CSS Box Model Generator, yang bisa kamu gunakan untuk membuat Box Modelmu sendiri atau hanya untuk simulasi saja.
Kegunaan lainnya
Selain mengatur jarak antara satu elemen dengan elemen lainnya, Box Model juga dapat membantu kita dalam menghitung lebar dan tinggi suatu elemen HTML. Agar dapat lebih memahaminya, di bawah ini merupakan contoh perhitungannya.
- 320px (lebar area konten elemen) + 20px (padding kiri + padding kanan) + 10px (border kiri + border kanan) = 350px (lebar total)
- 50px (tinggi area konten elemen) + 20px (padding atas + padding bawah) + 10px (border atas + border bawah) = 80px (tinggi total)
Referensi
Blog Yang Mirip
mengenal, css, box, model, mengenal apa, itu box, model css, apa itu, itu css, css box, box model, mengenal apa itu, apa itu box, itu box model, box model css, apa itu css, itu css box, css box model, mengenal apa itu box, apa itu box model, itu box model css, apa itu css box, itu css box model, mengenal apa itu box model, apa itu box model css, apa itu css box model, mengenal apa itu box model css
Konten Yang Mirip
Konten yang mirip dengan konten ini
Mungkin Kamu Juga Suka
Konten yang mungkin kamu juga suka
Konten Lainnya
Konten lainnya yang bisa kamu jelajahi
Blog Informatif
Baca-baca blog topik random. Ada berbagai macam topik random yang tersedia, seperti game, pemrograman, dan banyak lagi. Mungkin terlalu random.
Resource Gratis
Berbagai macam resource yang bisa kamu download, seperti bendera-bendera negara di dunia, icon folder, dan banyak lagi.
Online Tools
Tool untuk mempermudah pekerjaanmu. Mau mendapatkan angka acak? Kamu bisa pakai Random Number Generator. Mau menghitung berat badan idealmu? Kamu bisa pakai BMI Calculator. Di sini tersedia berbagai macam tool yang bisa kamu gunakan secara gratis.
Game Sederhana
Bosan? Bingung mau ngapain? Ayo main game-game sederhana, seperti Tic Tac Toe, Simple Math, dan semacamnya.
Daftar Singkatan
Mungkin kamu pernah dengar atau lihat sebuah kata yang cukup asing, seperti YGY, GG, dan lainnya. Di sini, kamu bisa cari tahu apa sih arti dari kata-kata tersebut. Selain itu, kamu juga bisa mencari tahu mengenai abreviasi/singkatan lainnya yang mungkin kamu belum tahu sebelumnya di koleksi abreviasi yang sudah dikumpulkan.