Programming Fundamental 8

3.2 Box Model, Margin, Padding dan Border

3.2.1. Box Model

Gambar Diagram Visual Box Model

Di dalam dunia CSS, setiap komponen yang muncul di halaman web kita diperlakukan sebagai sebuah 'kotak' individual. Konsep fundamental ini dikenal sebagai Box Model, dan ini merupakan landasan esensial yang harus kita pahami untuk menguasai bagaimana tata letak (layout) pada sebuah situs dapat kita atur secara efektif. Setiap elemen punya empat lapisan utama dari luar ke dalam:
  • Margin → ruang di luar elemen, memisahkan elemen satu dengan yang lain.
  • Border → garis pembatas di sekeliling elemen.
  • Padding → ruang di dalam elemen, antara konten dan border.
  • Content → area utama tempat teks atau gambar ditampilkan.

Berikut contoh kode dari Box Model:

.box {
    /* Content */
    width: 300px;
    height: 200px;

    /* Padding - ruang di dalam elemen */
    padding: 20px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;

    /* Border - garis di sekitar elemen */
    border: 2px solid #333;
    border-width: 2px;
    border-style: solid;
    border-color: #333;

    /* Margin - ruang di luar elemen */
    margin: 20px;
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;

    /* Box-sizing */
    box-sizing: border-box; /* padding dan border termasuk dalam width/height */
}


Bayangkan seperti sebuah bungkusan hadiah:
  • Content → barangnya.
  • Padding → busa pelindung di dalam kotak.
  • Border → kotaknya sendiri.
  • Margin → ruang kosong antara kotak satu dan lainnya di rak.

3.2.2. Padding (Menambahkan Ruang ke Elemen)

Kadang, kita ingin memberi jarak antara isi elemen (seperti teks) dan tepi kotaknya. Di sinilah properti padding berguna. Berikut contoh penulisan kodenya:

.box {
    background-color: #e0e7ff;
    padding: 20px;
}

Penjelasan:
  • padding menambahkan ruang di dalam elemen, antara konten dan border.
  • Kalau elemen punya background, warna tersebut akan ikut menutupi area padding.
  • Hasilnya: teks tidak lagi menempel ke pinggir kotak, tapi punya ruang bernapas di sekelilingnya.
  • Terdapat dua jenis penulisan padding yang dapat diterapkan, diantaranya:

1) Padding di Satu Sisi Saja

Kadang Anda cuma butuh jarak di satu sisi (misalnya atas saja, atau kiri saja). Untuk itu, Anda bisa pakai properti padding yang lebih spesifik. Berikut contoh penulisan kodenya:

.box {
    padding-top: 20px; /* jarak di atas */
    padding-bottom: 10px; /* jarak di bawah */
    padding-left: 15px; /* jarak di kiri */
    padding-right: 15px; /* jarak di kanan */
}

Tips:
  • Gunakan properti spesifik seperti padding-top atau padding-left saat Anda cuma mau menambah jarak di sisi tertentu.
  • Ini berguna buat penyesuaian kecil di layout.
2) Padding Shorthand (Penulisan Singkat)

Anda bisa menuliskan padding untuk beberapa sisi sekaligus dalam satu baris. Berikut contoh penulisan kodenya:

/* Empat sisi (urutan searah jarum jam: atas, kanan, bawah, kiri) */
padding: 10px 20px 15px 5px;

/* Dua nilai (atas/bawah, kanan/kiri) */
padding: 20px 10px;

/* Satu nilai (semua sisi sama) */
padding: 15px;

Penjelasan Urutan (Clockwise Rule): padding: atas kanan bawah kiri;



3.2.3. Margin (Ruang di Luar Elemen)

Kalau padding memberi ruang di dalam elemen, maka margin memberi ruang di luar elemen, antara satu elemen dan elemen lainnya. Berikut contoh penulisan kodenya:

.card {
    background: white;
    padding: 20px;
    margin: 30px;
    border: 1px solid #ddd;
}

Margin Shorthand

Sama seperti padding, margin pun juga bisa ditulis secara singkat. Berikut contoh penulisan kodenya:

/* Empat sisi */
margin: 10px 20px 15px 5px;

/* Dua nilai (atas/bawah, kanan/kiri) */
margin: 20px 10px;

/* Satu nilai (semua sisi sama) */
margin: 15px;

Syntax Pattern:
  • margin: [top] [right] [bottom] [left];
  • margin: [vertical] [horizontal];
  • margin: [all-sides];
Tips: 
  • untuk mengingatnya dapat menghafalkan rumus: "TRouBLe" (Top, Right, Bottom, Left)

3.2.4. Box Sizing

Secara bawaan (default), properti padding dan border akan menambahkan dimensi pada ukuran total elemen yang bersangkutan. Namun, perilaku ini terkadang dapat menyebabkan perhitungan tata letak (layout) menjadi tidak sesuai harapan. Solusi yang paling umum dan efektif untuk mengatasi hal ini adalah dengan menerapkan deklarasi box-sizing: border-box;. Berikut contoh penulisan kodenya:

* {
    box-sizing: border-box;
}

Efeknya:
  • Lebar dan tinggi elemen sudah termasuk padding dan border.
  • Sangat disarankan untuk proyek modern (jadi best practice di semua reset CSS).
Penulisan kode pada HTML-nya:

<div class="box">Halo, saya elemen dengan padding dan margin!</div>
 
Berikut penulisan contoh kode CSS-nya:

.box {
    background-color: #c7d2fe;
    border: 2px solid #4338ca;
    padding: 20px;
    margin: 30px;
    color: #1e293b;
    font-family: Arial, sans-serif;
}


Kesimpulan

Meskipun properti padding dan margin mungkin tampak seperti detail yang sepele, keduanya sesungguhnya merupakan pondasi krusial dalam membangun tata letak web modern. Dengan menguasai Box Model secara mendalam, para Digiers akan mampu mengatur jarak internal (padding) dan eksternal (margin) elemen dengan tingkat presisi tinggi. Hal ini tidak hanya memastikan kerapian visual, tetapi juga menciptakan proporsi dan keseimbangan yang membuat desain terasa lebih 'lega' dan nyaman saat dinikmati oleh pengguna.

Penjelasan Singkat:

  • width dan height menentukan ukuran konten utama.
  • padding memberi ruang di dalam elemen biar teks nggak mepet ke pinggir.
  • border menambah garis luar, bisa diatur tebal, warna, dan gayanya.
  • margin mengatur jarak antar elemen di luar kotak..
  • box-sizing: border-box; bikin padding dan border dihitung dalam total lebar/tinggi elemen (biar layout nggak geser-geser).
Untuk diingat: Jika website yang Anda buat mulai berantakan jaraknya, kemungkinan besar masalahnya ada di margin atau padding!

3.3 Typography, Warna, dan Background

Untuk memanfaatkan fitur ini, langkah pertama yang harus dilakukan adalah menyertakan pustaka ikon dari CDN langsung di dalam bagian <head> dokumen HTML yang sedang dibuat. Content delivery network (CDN) adalah kumpulan server yang tersebar secara geografis yang mempercepat pengiriman konten web dengan mendekatkannya ke lokasi pengguna.

3.3.1. Typography

Salah satu kekuatan utama CSS adalah kemampuannya untuk mengatur tipografi atau gaya tulisan (font), yang sangat memengaruhi keterbacaan dan konsistensi visual laman web. Kita dapat melakukan penyesuaian mendetail, mulai dari menentukan jenis font yang digunakan, ukuran huruf, tingkat ketebalan (weight), hingga mengatur jarak antar baris (line height) agar teks terasa lebih nyaman dibaca.

1) Berikut contoh penulisan code untuk font family:

.text {
    /* Font Family */
    font-family: "Arial", sans-serif;       /* Modern dan bersih */
    font-family: "Times New Roman", serif; /* Klasik, seperti koran */
    font-family: "Courier New", monospace; /* Untuk teks kode */

    /* Font Size */
    font-size: 16px; /* ukuran tetap */
    font-size: 1.2rem; /* relatif terhadap root font */
    font-size: 1.2em; /* relatif terhadap parent element */

    /* Font Weight (ketebalan) */
    font-weight: normal;
    font-weight: bold;
    font-weight: 300; /* angka 100-900 */

    /* Font Style */
    font-style: normal;
    font-style: italic;
    font-style: oblique;

    /* Text Decoration */
    text-decoration: none;
    text-decoration: underline;
    text-decoration: line-through;

    /* Text Alignment */
    text-align: left;
    text-align: center;
    text-align: right;
    text-align: justify;

    /* Line Height */
    line-height: 1.5;
    line-height: 24px;

    /* Letter Spacing */
    letter-spacing: 1px;
    letter-spacing: 0.1em;

    /* Text Transform */
    text-transform: uppercase; /* Semua huruf besar */
    text-transform: lowercase; /* Semua huruf kecil */
    text-transform: capitalize; /* Huruf pertama tiap kata besar */
}

Saran penggunaan font:
  • Gunakan font sans-serif (seperti Arial) untuk tampilan modern.
  • Gunakan rem untuk ukuran font agar responsif di berbagai layar.
  • Gunakan line-height 1.5-1.8 untuk teks yang nyaman dibaca.
2) Berikut contoh penulisan code untuk font external:

.text-modern {
    /* Font Family (Menggunakan Google Fonts) */
    /* Pastikan link Google Fonts sudah ditambahkan di <head>:
     <link href="https://fonts.googleapis.com/css?family=Poppins:wght@400;600&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    */
    /* Font Family */
    font-family: "Poppins", sans-serif; /* Bersih, modern, cocok untuk heading */
    font-family: "Roboto", sans-serif; /* Mudah dibaca, ideal untuk paragraf */

    /* Font Size */
    font-size: 16px; /* Ukuran dasar untuk teks isi */
    font-size: 1rem; /* Relatif terhadap root font (umum digunakan) */
    font-size: 2rem; /* Untuk heading besar */

    /* Font Weight (Ketebalan) */
    font-weight: 400; /* Normal */
    font-weight: 600; /* Semi-bold untuk subjudul */
    font-weight: 700; /* Bold untuk judul utama */

    /* Font Style */
    font-style: normal; /* Default */
    font-style: italic; /* Untuk penekanan kata atau kutipan */

    /* Text Decoration */
    text-decoration: none; /* Tanpa dekorasi */
    text-decoration: underline; /* Untuk tautan atau penekanan */
    text-decoration: line-through; /* Untuk menandai teks yang sudah tidak berlaku */

    /* Text Alignment */
    text-align: left; /* Default */
    text-align: center; /* Untuk judul utama */
    text-align: justify; /* Meratakan paragraf di kedua sisi */

    /* Line Height */
    line-height: 1.6; /* Spasi antar baris agar nyaman dibaca */

    /* Letter Spacing */
    letter-spacing: 0.5px; /* Menambah sedikit jarak antar huruf */
    letter-spacing: 0.1em; /* Alternatif untuk tampilan lebih longgar */

    /* Word Spacing */
    word-spacing: 2px; /* Menambah jarak antar kata */

    /* Text Transform */
    text-transform: none; /* Default */
    text-transform: uppercase; /* Semua huruf besar */
    text-transform: capitalize; /* Huruf pertama tiap kata besar */
}

Dalam CSS, terdapat lima keluarga font generik:
  • Font serif - memiliki garis kecil di tepi setiap huruf. Font ini memberikan kesan formal dan elegan.
  • Font sans-serif - memiliki garis yang bersih (tanpa garis kecil di tepi). Font ini memberikan tampilan modern dan minimalis.
  • Font monospace - di sini semua huruf memiliki lebar tetap yang sama. Font ini menciptakan tampilan mekanis.
  • Font cursive - meniru tulisan tangan manusia.
  • Font fantasy - adalah font dekoratif/lucu.

3.3.2. Colors / Warna

Dalam mengatur warna, CSS memberikan fleksibilitas yang sangat baik. Kita dapat memanfaatkan berbagai format penentuan warna, mulai dari nama warna standar yang mudah diingat, hingga penggunaan kode yang lebih kompleks seperti model RGB (Red, Green, Blue) maupun HSL (Hue, Saturation, Lightness). Berikut contoh penulisan codenya:

.color-examples {
    /* Named Colors */
    color: red;
    color: blue;
    color: green;

    /* Hexadecimal */
    color: #ff0000; /* merah */
    color: #00ff00; /* hijau */
    color: #0000ff; /* biru */
    color: #333; /* abu-abu gelap (#333333) */

    /* RGB */
    color: rgb(255, 0, 0);
    color: rgb(0, 255, 0);
    color: rgb(0, 0, 255);

    /* RGBA (ada transparansi) */
    color: rgba(255, 0, 0, 0.5);
    color: rgba(0, 0, 0, 0.8);

    /* HSL */
    color: hsl(0, 100%, 50%); /* merah */
    color: hsl(120, 100%, 50%); /* hijau */
    color: hsl(240, 100%, 50%); /* biru */
}

Catatan:
  • HEX sering dipakai di desain modern (#333, #f4f4f4).
  • RGBA bagus untuk efek transparan.
  • HSL memudahkan pengaturan warna berdasarkan hue (warna), saturation (kejenuhan), dan lightness (kecerahan).

3.3.3. Background

Selain mengontrol warna teks, CSS juga memungkinkan kita untuk mengatur latar belakang laman atau elemen menggunakan properti background. Melalui properti ini, Anda dapat menentukan warna latar yang solid atau bahkan menyisipkan gambar latar sesuai kebutuhan desain. Berikut contoh penulisan codenya:

.background-examples {
    /* Warna Latar */
    background-color: #f0f0f0;

    /* Gambar Latar */
    background-image: url("image.jpg");
    background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4);

    /* Posisi Gambar */
    background-position: center;
    background-position: top left;
    background-position: 50% 50%;

    /* Ukuran Gambar */
    background-size: cover; /* penuh tapi potong sedikit */
    background-size: contain; /* utuh tapi mungkin tidak penuh */
    background-size: 100% 100%;

    /* Pengulangan Gambar */
    background-repeat: no-repeat;
    background-repeat: repeat;
    background-repeat: repeat-x;
    background-repeat: repeat-y;

    /* Sifat Background */
    background-attachment: scroll; /* ikut layar */
    background-attachment: fixed; /* tetap di tempat */
}

Catatan:
  • Gunakan background-color untuk layer dasar.
  • Kombinasikan dengan linear-gradient untuk tampilan modern.
  • Gunakan background-size: cover biar gambar otomatis menyesuaikan layar.


Komentar

Posting Komentar

Postingan populer dari blog ini

SIPD Chrome Extension untuk Migrasi Data dari SIPD ke SIMDA PINK Th. Anggaran 2022

Gambar
1. Siapkan Server untuk tempat backup DB lokal menggunakan WP-SIPD Sangat disarankan menggunakan hardware PC server untuk menginstall web server yang akan digunakan untuk migrasi data. Penggunaan hardware akan berpengaruh pada kecepatan saat melakukan singkronisasi. Sebaiknya juga menggunakan domain dan IP publik agar aplikasi bisa diakses dari internet. Hal ini akan mempermudah dikemudian hari untuk melakukan singkronisasi dari manapun. Pastikan web server aplikasi wp-sipd dapat terhubung dengan jaringan dari server database sql server simda. Berikut langkah-langkah install WP-SIPD pada PC server windows: Download xampp dengan php versi 7.xx, jangan menggunakan versi 8.xx karena saat ini driver odbc belum support. File dapat didownload di  https://www.apachefriends.org/download.html . Selain XAMPP dapat menggunakan web server lain sesuai kebutuhan. Yang terpenting adalah modul PHP dan database MYSQL Edit file php.ini yang bisa diakses melalui control panel XAMPP. Klik menu Config ...
Baca selengkapnya

Mapping Sumber Dana di WP-SIPD

Gambar
Permasalah mapping sumber dana di SIPD kemendagri terjadi karena settingan sumber dana melekat pada sub kegiatan dan nilai pagunya tidak mengunci atau hasil akumulasi pada rincian belanja. Hal ini membuat pemda sangat kesulitan dalam melakukan monitoring evaluasi pagu per sumber dana melalui aplikasi SIPD. Fitur custom mapping sumber dana pada aplikasi WP-SIPD dibuat untuk menyelesaikan masalah ini. Untuk menggunakan fitur ini silahkan mengikuti langkah berikut ini: Update plugin wp-sipd yang terbaru dari master zip di repository  https://github.com/agusnurwanto/wp-sipd . Jika menggunakan tool GIT tinggal jalankan perintah git pull origin master untuk mengupdate script terbaru wp-sipd. Singkronkan dulu data master Sumber Dana dari SIPD ke WP-SIPD pada menu Referensi - Sumber Dana menggunakan sipd-chrome-extension. Untuk cara installasinya bisa cek artikel  https://smkasiyahhomeschooling.blogspot.com/2021/12/sipd-chrome-extension-untuk-migrasi.html . Pada dashboard admin word...
Baca selengkapnya

Dokumentasi Aplikasi Migrasi Aset SIMDA BMD

Gambar
  Aplikasi migrasi aset dari SPBMD ke SIMDA BMD ini berbentuk plugin wordpress. Untuk melakukan installasi harus sudah menginstall wordpress terlebih dulu. Selanjutnya bisa donwload atau clone plugin SIMDA BMD di  https://github.com/agusnurwanto/SIMDA-BMD . Upload plugin di folder wp-content/plugins dan aktifkan plugin. 1. Setting Koneksi Database Login menggunakan user administrator wordpress. Buka menu SIMDA BMD  dan isi form koneksi database. Status koneksi database SIMDA . Berwarna merah berarti konfigurasi belum terkoneksi ke database SIMDA BMD. Berwarna hijau berarti sudah terkoneksi. URL API SIMDA berisi url dari aplikasi repository  https://github.com/agusnurwanto/SIMDA-API-PHP . Aplikasi ini berfungsi untuk membuat API PHP ke database SQL server. APIKEY SIMDA berisi random string untuk keperluan pengamanan request API Database SIMDA adalah nama database yang dipakai oleh SIMDA BMD Status koneksi database MYSQL SPBMD . Berwarna merah berarti belum terkone...
Baca selengkapnya