Mengenal Dasar-Dasar Layout CSS Dalam Pembuatan Website

label

Dalam membuat atau mendesain sebuah tampilan halaman website, terdapat 3 prinsip utama yang harus dipahami dalam membuat layout CSS untuk membangun sebuah website, yaitu:

  • CSS box model
  • Floating
  • Positioning

Tiga prinsip ini secara bersamaan ini mengontrol penyusunan elemen-elemen tampilan yang ditampilkan di halaman website. Dan untuk kali ini, kita akan mengenal serta belajar dasar-dasar dalam pembuatan layout CSS untuk membangun tampilan website, yaitu CSS model box, margin & padding, serta border.

Mengenal Dasar-Dasar Layout CSS Dalam Pembuatan Website | Tanahpengetahuan.com

CSS box model

Setiap elemen blok di CSS berada di dalam kotak, dan dapat memiliki margin, padding, dan batas yang ditetapkan. Lebar kotak dapat ditentukan dalam nilai absolut (mis. Pixel atau px) atau dalam nilai relatif, yaitu dapat berupa:

- em - nilai lebar relatif terhadap ukuran font di ems, atau

- persentase - nilai lebar relatif terhadap wilayah konten di kotak tersebut

Setiap CSS box dibagi menjadi beberapa wilayah, terdiri dari:

  • Content
  • Padding
  • Border
  • Margin
basic layout structure
Dengan properti margin, border, dan padding, masing-masing dari 4 sisi dapat ditentukan secara terpisah.
basic layout structure

Margin dan Padding mungkin terlihat sama pada awalnya. Tetapi masing-masing memiliki efeknya sendiri pada content, terutama pada latar belakang yang berjenis block dan elemen div.

basic layout structure

Mengenal Margin
Margin menentukan ruang di sekitar elemen di luar batas. Properti margin dapat memiliki nilai negatif agar content dapat tumpang tindih dengan content lainnya. Properti margin akan mempengaruhi posisi elemen latar belakang (grafik dan / atau warna) dalam kaitannya dengan tepi elemen blok yang memuatnya. Properti margin dapat ditentukan sendiri baik di atas, kanan, bawah dan kiri, atau sekaligus menggunakan sintaks CSS.

Mengenal Padding
Padding mendefinisikan ruang di sekitar elemen di dalam border; yaitu antara border dan konten itu sendiri. Properti padding tidak boleh memiliki nilai negatif. Properti padding tidak mempengaruhi posisi elemen latar belakang (grafik dan / atau warna) dalam elemen blok containing; namun hanya pada posisi konten. Properti padding dapat ditentukan sendiri baik di atas, kanan, bawah dan kiri, atau sekaligus menggunakan sintaks CSS.

Margin Collapse
Saat dua margin vertikal atau lebih saling bertemu, mereka akan menciut untuk membentuk margin tunggal. Ketinggian margin gabungan ini akan sama dengan tinggi margin yang lebih besar dari 2 margin. Margin Collapse berlaku jika: 
- Dua elemen blok atau lebih ditumpuk satu di atas yang lain, atau
- Ketika satu elemen blok berada di dalam elemen blok lainnya

margin collapse stacked
margin collapse contained

Untuk margin dan padding (dan lainnya), CSS menyediakan sejumlah sintaks yang dapat menghemat penulisan baris dan baris kode. Daripada menulis ini:
#container {
  margin-top: 0;
  margin-right: 5px;
  margin-bottom: 6px;
  margin-left: 5px;
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 30px;
  padding-left: 12px;
}

Lebih baik dituliskan dengan cara seperti ini:

#container {
  padding: 20px 10px 30px 12px;
  margin: 0
px 5px 6px 5px;
}


Untuk urutan kodenya selalu searah jarum jam, dimulai dari atas
margin & padding



Selain itu juga dapat menerapkan hanya satu nilai margin atau padding, contoh:

#container {
  padding: 20px;
  margin: 5px;
}

Yang akan menerapkan nilai yang ditentukan pada keempat sisi dari padding dan margin.
margin & padding


Dan juga CSS dapat menerapkan dua nilai margin atau padding, contoh:

#container {
  padding: 10px 20px;
  margin: 0px 5px;
}
Nilai pertama diterapkan untuk nilai atas dan bawah dan nilai kedua diterapkan  untuk nilai kiri dan kanan.

margin & padding

Ada satu nilai yang cukup berguna saat mengatur layout, yaitu 'auto'.

#container {
  padding: 10px 20px;
  margin: 0px auto;
}
Biasanya diterapkan ke area kiri & kanan properti margin, auto berguna untuk memusatkan elemen block pada jendela browser.
margin & padding


Borders
Border dapat diterapkan ke elemen blok apa pun. Border selalu berada di luar area padding, tetapi di dalam area margin. Properti border tidak boleh memiliki nilai negatif. Jika border tidak ditentukan, defaultnya adalah tidak ada border(yaitu tidak ada border yang muncul dan tidak ada spasi antara margin dan padding yang ditetapkan untuk border). Properti border dapat ditentukan secara independen di atas, kanan, bawah dan kiri, atau sekaligus menggunakan singkatan CSS.

Properti border yang dapat digunakan adalah:

Width: absolute (px, in, cm, or ‘thin’, ‘medium’, ‘thick’), or relative (ems)
Style: dotted, dashed, solid, double, groove, ridge, inset, outset, hidden, etc
Color: ‘blue’, ‘red’, #FF9900, etc

Anda juga dapat membuat efek border dengan menggunakan gambar grafik di properti latar belakang CSS, bukan dengan properti border.


Share This :

Nazrin (ナズーリン Nazūrin) is a mouse youkai who's a skilled dowser and the leader of a great number of mice. As the leader of many mice, she often employs them to search for things for her; though if she were to ask them to find food, it would most likely be gone by the time they returned.

Related Post



sentiment_satisfied Emoticon