[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-box-model-css":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":18,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},467,"box-model-css","Tutorial CSS : Apa Itu Box Model CSS","Apa itu box model ? Setiap elemen atau tag HTML ditampilkan dalam bentuk box atau kotak, tetapi ada juga sebagian orang menamai kotak persegi panjang. Didalam CSS ini disebut dengan istilah box-model.",null,[],"2021-10-21T16:00:00Z","2026-07-14T04:39:41.991997Z","\u003Ch2>Apa itu box model ?\u003C\u002Fh2>\u003Cp>Setiap elemen atau tag HTML ditampilkan dalam bentuk box atau kotak, tetapi ada juga sebagian orang menamai kotak persegi panjang. Didalam CSS ini disebut dengan istilah box-model.\u003C\u002Fp>\u003Cp>Jadi box model adalah sebuah box atau “kotak” yang membungkus setiap elemen atau tag pada HTML, yang terdiri dari properti: margin, border, padding dan konten.\u003C\u002Fp>\u003Cp>Dalam CSS, istilah box model digunakan ketika berbicara tentang desain dan tata letak. Supaya tidak bingung silakan lihat ilustrasi gambar dibawah ini:\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fres.cloudinary.com\u002Fdprnqhug7\u002Fimage\u002Fupload\u002Fv1628523515\u002Fplaceholder_1_pmvspc.svg\"\u002F>\u003Cfigcaption>\u003Ci>box model css\u003C\u002Fi>\u003C\u002Ffigcaption>\u003C\u002Ffigure>\u003Cp>Kita bahas satu-satu:\u003C\u002Fp>\u003Col>\u003Cli>Margin: batas luar antara elemen dengan elemen lainya.\u003C\u002Fli>\u003Cli>Padding: batas dalam antara konten dengan border.\u003C\u002Fli>\u003Cli>Border: garis batas antara padding dengan margin\u003C\u002Fli>\u003Cli>Konten: konten dari elemen tersebut, bisa text, image atau media lainnya.\u003C\u002Fli>\u003C\u002Fol>\u003Cp>\u003Cstrong>Hasilnya adalah:\u003C\u002Fstrong>\u003C\u002Fp>abu-abukuning\u003Cp>Dari div di atas kita bisa lihat bahwa lebar kedua elemen itu jadi sama padahal \u003Ccode>width\u003C\u002Fcode> di stylenya berbeda.\u003C\u002Fp>\u003Cp>Ini karena kita menambahkan property \u003Ccode>box-sizing\u003C\u002Fcode> dengan value \u003Ccode>content-box\u003C\u002Fcode>.\u003C\u002Fp>\u003Cp>Jadi width \u003Cstrong>div kuning\u003C\u002Fstrong> jika kita hitung = width + margin-left + margin-right + padding-left + padding-right + border-left + border-right.\u003C\u002Fp>\u003Cp>\u003Cstrong>200px + 20px + 20px + 10px + 10px = 260px\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>Jadi width-nya menjadi bertambah dipengaruhi oleh margin, padding dan border.\u003C\u002Fp>\u003Cp>Jika kamu ingin widthnya menjadi tetap sesuai dengan value width yang kamu definisikan maka set value dari \u003Ccode>box-sizing\u003C\u002Fcode> = \u003Ccode>border-box\u003C\u002Fcode>;\u003C\u002Fp>\u003Cp>\u003Cstrong>Hasilnya adalah:\u003C\u002Fstrong>\u003C\u002Fp>abu-abukuningSekarang width tidak akan bertambah dengan margin, padding, dan border.\u003Cp>Nah itulah pembahasan tentang properti \u003Cstrong>box sizing dalam css\u003C\u002Fstrong>. Semoga artikel ini bisa membuat kamu lebih mengerti tentang box sizing dalam css.\u003C\u002Fp>\u003Cp>Kunjungi artikel tentang css lainnya di link berikut: Belajar CSS\u003C\u002Fp>","Apa itu box model ? Setiap elemen atau tag HTML ditampilkan dalam bentuk box atau kotak, tetapi ada juga sebagian orang menamai kotak persegi panjang. Didalam C",[],[],0]