Model kotak (box model) dalam CSS adalah konsep yang mendefinisikan
bagaimana elemen HTML ditampilkan di halaman web,
dengan memperlakukan setiap elemen sebagai kotak persegi panjang
yang terdiri dari empat bagian:
konten, padding, border, dan margin.
.box-model-example {
/* Content area */
width: 200px;
height: 100px;
/* Padding */
padding: 20px;
/* atau */
padding: 10px 20px;
/* vertical horizontal */
padding: 10px 15px 20px 25px;
/* top right bottom left */
/* Border */
border: 2px solid #333;
/* atau */
border-width: 2px;
border-style: solid;
border-color: #333;
/* Margin */
margin: 10px auto;
/* center horizontal */
margin: 10px 0 20px 0;
/* top right bottom left */
}
Box Sizing
/* Default - content-box */
.content-box {
box-sizing: content-box;
width: 200px;
/* hanya content */
padding: 20px;
border: 2px solid #333;
/* Total width = 200 + 40 + 4 = 244px */
}
/* Border-box (Recommended) */
.border-box {
box-sizing: border-box;
width: 200px;
/* termasuk padding dan border */
padding: 20px;
border: 2px solid #333;
/* Total width = 200px */
}
/* Global reset */
* {
box-sizing: border-box;
}
Display Property
.display-examples {
/* Block: mengambil lebar penuh */
display: block;
/* Inline: sesuai konten, tidak bisa set width/height */
display: inline;
/* Inline-block: gabungan inline dan block */
display: inline-block;
/* None: elemen disembunyikan */
display: none;
/* Flex: untuk flexbox layout */
display: flex;
/* Grid: untuk grid layout */
display: grid;
}
sasa
0 Komentar