Responsive Advertisement

Cara Membuat Box Model Pada CSS

judul

Tutorial kali ini, kita akan mengetahui cara membuat box model pada css. Tetapi kamu harus belajar Membuat Border dan Tipe CSS untuk mengetahui dasar pengetahuan border. Dalam tutorial ini, kamu akan belajar menempatkan teks dengan gambar agar sesuai dengan ukurannya.

Bedanya Versi 32-bit dengan 64-bit

Misalnya kamu menggunakan judul diatas gambar dan memberikan border pada sisi judul, biasanya ukuran border dan gambar tidak sama. Maka dari itu tutorial ini mengajarkan kalian tentang membuat ukuran posisi teks dengan gambar menjadi sama.

Contoh kodingan dapat kamu lihat dibawah ini.

See the Pen #8 box-model by lintangzakti (@zakti13) on CodePen.

Kelas halaman1 dibuat agar gambar dan teks terlihat menyatu. Kamu dapat melihat perbedaannya bahwa teks yang menggunakan border mempunyai lebar yang sama dengan ukuran gambar. Namun, metode ini tidak hanya digunakan untuk teks, tetapi dapat digunakan banyak hal untuk merapikan posisi pada website kamu.

Mudah bukan? Terima kasih sudah berkunjung di blog ini. Saya harap tutorial ini bermanfaat bagi kalian yang sedang mencari pembelajaran tentang programming. Artikel menarik lainnya dapat kamu temukan di blog ini ya.

Jika kamu ingin mencoba, silahkan kamu masukkan kodingan tersebut ke dalam Text Editor lalu Save As dengan format HTML dan nama yang kalian suka. Klik dua kali untuk membuka File tersebut dan lihat hasilnya.