Ing CSS, Box Model minangka konsep penting kanggo nemtokake cara unsur disusun lan dipanggonke ing kaca web. Iku kasusun saka komponen dhasar kayata Content, Padding, Border lan Margin.
Content
Content yaiku area sing ngemot isi nyata saka unsur kasebut, kayata teks, gambar, utawa video.
Kanggo nemtokake ukuran isi, kita nggunakake properti width lan height.
Padding
Padding iku spasi watara isi, nggawe longkangan antarane isi lan unsur kang border.
Kanggo nemtokake padding nilai, kita nggunakake padding-top, padding-right,padding-bottom lan properti. padding-left
Border
Iki Border minangka garis ing saubengé unsur, nggawe wates sing jelas antara isi lan wilayah saubengé.
Kanggo ngowahi format border, kita nggunakake border-width, border-style, lan border-color properti.
Margin
Margin iku spasi njaba unsur kang border, nggawe longkangan antarane unsur liyane.
Kanggo nemtokake margin nilai, kita nggunakake margin-top, margin-right, lan properti. margin-bottom margin-left
Kanthi nggunakake Box Model CSS ing, kita bisa ngatur ukuran lan posisi unsur kanthi ngowahi nilai komponen kasebut.
Tuladha:
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
Ing conto ing ndhuwur, unsur karo kelas .box duwe jembaré 200px lan dhuwuré 100px. Wis 20px padding, ireng border kanthi kekandelan 1px, lan 10px margin.
Kanthi nyetel nilai kasebut, sampeyan bisa nggawe unsur kanthi ukuran lan jarak sing beda ing kaca web sampeyan. Liwat panggunaan Box Model, sampeyan duwe kontrol babagan posisi, ukuran, lan jarak unsur ing antarmuka sampeyan.