Belajar CSS : Box Model

posted in: Tutorial Pemrograman | 0

Semua elemen HTML dapat dianggap sebagai box. Dalam CSS, istilahnya adalah “box model”, digunakan ketika berbicara tentang desain dan tata letak.

Box model CSS pada dasarnya adalah sebuah box yang membungkus di sekitar elemen HTML, dan terdiri dari: margin, border, padding, dan konten yang sebenarnya.

Box model memungkinkan kita untuk menempatkan border dan elemen ruang dalam kaitannya dengan elemen elemen lain.

Gambar di bawah ini menggambarkan box model :

belajar css-box model

  • Margin – Daerah paling luar di sekitar border. Margin transparan/tidak memiliki warna latar
  • Border – Garis yang ada disekitar content dan berjarak berdasarkan nilai padding. Border dapat berisi property seperti warn, ukuran, dan jenis garis.
  • Padding – Daerah diantara content dan border. Padding akan memiliki property dari warna.
  • Content – Isi dari kotak, di mana teks dan gambar tampil.

Dalam rangka untuk mengatur lebar dan tinggi dari suatu elemen dengan benar di semua browser, Anda perlu tahu bagaimana model box bekerja.

Width dan Height Element

Berikut adalah contoh property untuk CSS Box model:


width: 250px;
padding: 10px;
border: 5px solid gray;
margin: 10px;

CSS Border

CSS border properti memungkinkan Anda untuk menentukan Style dan warna border suatu elemen.

Properti border-style menentukan border yang mau ditampilkan :

Nilai Keterangan
None tidak memiliki border
Dot border dengan sytle titik – titik
Dashed border dengan style garis lurus putus-putus
Solid border dengan style garis lurus
Double border denga sytle 2 garis lurus
Groove Mendefinisikan sebuah border beralur 3D. Efeknya tergantung pada nilai border-color
Ridge mendefinisikan border bergerigi 3D. Efeknya tergantung pada nilai border-color
Insert Mendefinisikan sebuah border yang berada di dalam dengan 3D Efeknya tergantung pada nilai border-color
Outset Mendefinisikan awal border 3D. Efeknya tergantung pada nilai border-color

Border Width

Properti border-width digunakan untuk mengatur lebar border.
Lebar diatur dalam pixel, atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan: thin, medium, atau thick (tipis, sedang, atau tebal)

Catatan: “border-width” properti tidak bekerja jika digunakan sendiri. Gunakan properti “border-style” untuk mengatur border  pertama kalinya


p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

Border Color

Properti border-color digunakan untuk mengatur warna border. Property “border-color” tidak bekerja jika digunakan sendiri. Gunakan “border-style” properti untuk mengatur border pertama kali nya.


p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: #98bf21;
}

Border – Mengatur secara individual

Dalam CSS memungkinkan untuk menentukan border yang berbeda untuk sisi yang berbeda:


p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

Border – Shorthand properti

Seperti yang Anda lihat dari contoh di atas, ada banyak sifat yang perlu dipertimbangkan ketika berhadapan dengan border.

Untuk mempersingkat kode, juga memungkinkan untuk menentukan semua properti border individu dalam satu properti. Hal ini disebut shorthand properti.

Properti border adalah shorthand untuk properti border masing-masing sebagai berikut:

  • border-width
  • border-style (dibutuhkan)
  • border-color

p {
border: 5px solid red;
}

CSS Margin

Margin margin adalah area paling luar di sekitar elemen (luar border).

Bagian atas, kanan, bawah, dan margin kiri dapat diubah secara independen menggunakan properti terpisah. Properti margin shorthand juga dapat digunakan untuk mengubah semua margin sekaligus.

Daftar property margin adalah:

Properti Deskripsi
margin Untuk pengaturan properti margin dalam satu deklarasi
margin-bottom Mengatur elemen margin bawah
margin-left Mengatur elemen margin kiri
margin-right Mengatur elemen margin kanan
margin-top Mengatur elemen margin atas

 

Nilai Margin

Nilai Deskripsi
auto Browser yang menghitung margin secara otomatis. Dipakai agar posisi di tengah
length Menentukan margin di px, pt, cm, dll Nilai default adalah 0px
% Menentukan margin dalam persentase dari lebar elemen
inherit Menentukan bahwa margin harus diwarisi dari elemen induk

 

Margin Individual sides
Dalam CSS, memungkinkan untuk menentukan margin yang berbeda untuk sisi yang berbeda dari elemen :


p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}

Margin – Shorthand properti
Untuk mempersingkat kode CSS, memungkinkan untuk menentukan semua properti margin dalam satu properti. Hal ini disebut shorthand properti.

p {
margin: 100px 50px;
}

Properti margin dapat memiliki dari satu sampai empat nilai.

margin: 25px 50px 75px 100px;

  • top margin 25px
  • right margin 50px
  • bottom margin 75px
  • left margin 100px

margin: 25px 50px 75px;

  • top margin 25px
  • right dan left margins 50px
  • bottom margin 75px

margin: 25px 50px;

  • top dan bottom margins 25px
  • right dan left margins 50px

margin: 25px;

  • semua margins 25px

 

CSS Padding

Padding adalah area di sekitar konten tapi di dalam border dari elemen. Padding dipengaruhi oleh warna latar belakang dari elemen.

Property Description
padding Untuk pengaturan properti padding dalam satu deklarasi
padding-bottom Mengatur elemen padding bawah
padding-left Mengatur elemen padding kiri
padding-right Mengatur elemen padding kanan
padding-top Mengatur elemen padding atas

Bagian atas, kanan, bawah, dan padding kiri dapat diubah secara independen menggunakan properti terpisah.

Nilai Padding

Nilai Deskripsi
length Mendefinisikan padding (dalam pixel, pt, em, dll)
% Mendefinisikan padding dalam % dari elemen

Padding – Individual sides
Dalam CSS, mungkin untuk menentukan padding yang berbeda untuk sisi yang berbeda:


p {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}

Padding – Shorthand property
Untuk mempersingkat kode, dimungkinkan menentukan semua properti padding dalam satu properti.


p {
padding: 25px 50px;
}

Properti padding dapat memiliki dari satu sampai empat nilai.

padding: 25px 50px 75px 100px;

  • top padding 25px
  • right padding 50px
  • bottom padding 75px
  • left padding 100px

padding: 25px 50px 75px;

  • top padding 25px
  • right and left paddings 50px
  • bottom padding 75px

 

padding: 25px 50px;

  • top and bottom paddings 25px
  • right and left paddings 50px

 

padding: 25px;

  • semua paddings 25px

 

CSS Dimension

CSS  Properti dimensi memungkinkan Anda untuk mengontrol tinggi dan lebar dari elemen.

Daftar property dimensi adalah sebagai berikut:

Properti Deskripsi Nilai
height Mengatur ketinggian elemen auto
length
%
inherit
max-height Mengatur ketinggian maksimum elemen none
length
%
inherit
max-width Mengatur lebar maksimum elemen none
length
%
inherit
min-height Mengatur ketinggian  minimum elemen length
%
inherit
min-width Mengatur lebar minimum elemen length
%
inherit
width Mengatur lebar elemen auto
length
%
inherit

CSS Block dan Inline

Elemen blok adalah elemen yang mengambil lebar penuh (baris) yang tersedia, dan mengambil satu baris sebelum dan setelah.

Contoh elemen blok adalah

  • <h1>
  • <p>
  • <li>
  • <div>

Sebuah elemen inline hanya membutuhkan sebanyak lebar yang diperlukan, dan tidak mengambil penuh satu baris.

Contoh elemen inline:

  • <span>
  • <a>

Mengubah elemen Display
Mengubah elemen inline dari elemen blok, atau sebaliknya, dapat berguna untuk membuat halaman terlihat dengan cara tertentu, dan masih mengikuti standar web.

Contoh berikut menampilkan <li> elemen sebagai elemen inline:


li {
display: inline;
}

Contoh berikut menampilkan <span> elemen sebagai elemen blok:
contoh


span {
display: block;
}

Leave a Reply