Dalam CSS, elemen pada dasarnya diperlakukan sebagai kotak berbentuk persegi atau strip. Untuk menggambarkan kotak tersebut, digunakan sifat-sifat berikut yang sudah pasti Anda kenal:
• width – lebar elemen
• height – tinggi elemen
• left – jarak ke kiri
• right – jarak ke kanan
• top – jarak ke atas
• bottom – jarak ke bawah
• margin – margin luar
• border – border elemen
• padding – padding, yaitu jarak dari border ke konten elemen
Sifat-sifat ini sudah diperkenalkan sebelumnya.
Lebar total elemen dihitung dari lebar setiap pengaturan. (Ini juga berlaku untuk tinggi).
Contoh:
div#box {
width: 100px;
padding: 20px; / pertama kali 20px kiri kanan /
border: 2px solid; / pertama kali 2px kiri kanan /
margin: 0 30px; / pertama kali 30px kiri kanan */
}Berapa lebar area div ini? Mari kita lihat nilai-nilai individu:
• 100 Piksel
• 2 Kali 20 Piksel
• 2 Kali 2 Piksel
• 2 Kali 30 Piksel
Total lebar elemen ini adalah 204 Piksel.
Lebar dan tinggi elemen ditentukan melalui width dan height. Jika tidak secara eksplisit dinyatakan dalam stylesheet, berlaku hal berikut:
• Jika width tidak ada, kotak akan ditampilkan selebar elemen sekitarnya.
• Jika height tidak ada, elemen akan ditampilkan setinggi kontennya.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; / pertama kali 2px kiri kanan /
margin: 0 30px; / pertama kali 30px kiri kanan /
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
Tampaknya di browser seperti berikut:
Elemen induk dari elemen div adalah body. Oleh karena itu, elemen tersebut memang ditampilkan selebar elemen body. Sedangkan untuk tingginya, elemen tersebut menyesuaikan kontennya.
Semua Nol
Setiap browser memiliki stylesheet bawaan. Di dalam stylesheet tersebut, beberapa nilai standar telah ditentukan. Hal ini juga berlaku untuk padding dan margin. Sayangnya, nilai-nilai standar ini bervariasi di berbagai browser. Hal ini membuat sulit untuk mencapai hasil yang identik di berbagai browser terutama terkait dengan model kotak. Oleh karena itu, disarankan untuk mengatur jarak yang telah diatur secara default oleh browser menjadi nol. Anda dapat melakukannya sebagai berikut:
* { padding: 0; margin: 0; }
Tambahkan baris ini di awal stylesheet Anda. Dengan demikian, Anda dapat mulai menempatkan kotak-kotak di posisi yang diinginkan.
Tipe Kotak
Bagaimana sebuah elemen akhirnya ditampilkan dan mempengaruhi elemen lain tergantung pada jenis elemennya. Secara faktual, spesifikasi CSS membedakan antara elemen blok dan elemen inline. (Terdapat jenis lain yang tidak dibahas di sini karena hanya memiliki peran yang kurang signifikan).
Elemen blok selalu membuat baris baru. Elemen-elemen berikutnya juga akan dimulai di baris baru. Contoh elemen blok antara lain p, div, h1, ul dan sebagainya. Untuk elemen-elemen ini, sifat-sifat seperti margin luar, padding, tinggi, lebar, dan border berlaku.
<h1>Digital Painting & Matte Painting: Definisi Struktur Gambar</h1> <p>Modul 2 - Bagian 2: Sebuah gambar selalu membentuk keseluruhan. Namun kita harus selalu memikirkan di mana mata penonton pertama kali melihat.</p>
Hasilnya di browser menunjukkan bahwa h1 dan p masing-masing membentuk baris baru.
<h1><em>Digital Painting & Matte Painting</em>: Definisi Struktur Gambar</h1> <p>Modul 2 - Bagian dua: <strong>Sebuah gambar selalu membentuk keseluruhan</strong>. Namun kita harus selalu memikirkan di mana mata penonton pertama kali melihat.</p>
Dan juga lihat hasilnya di sini:
Sekarang Anda dapat membuat elemen-elemen yang sebenarnya adalah elemen blok menjadi elemen inline.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Bagian 2: <em>Sebuah gambar selalu merupakan kesatuan utuh</em>. Namun, harus selalu dipertimbangkan di mana pemirsa seharusnya melihat pertama kali.</p>
</body>
</html>Lihatlah hasilnya di browser.
Warna latar belakang judul h1 menandakan bahwa elemen tersebut memanjang di seluruh lebar. Lebarnya mengikuti elemen overting body.
Sekarang mari kita masuk ke sifat tampilan.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Bagian 2: <em>Sebuah gambar selalu merupakan kesatuan utuh</em>. Namun, harus selalu dipertimbangkan di mana pemirsa seharusnya melihat pertama kali.</p>
</body>
</html>
Dengan tampilan: inline mengubah lebar elemen.
Sebenarnya, lebar elemen sekarang sesuaikan dengan konten yang ada. Berikut adalah ikhtisar nilai-nilai yang dapat diberikan kepada tampilan:
• none – tidak ada tampilan
• block – elemen ditampilkan sebagai elemen blok, sehingga membuat baris baru.
• inline – elemen ditampilkan sebagai elemen inline, muncul dalam aliran teks yang berjalan.
• inline-block – membuat blok secara visual, namun dapat menentukan tinggi, lebar, dan margin luar. Setiap elemen tetap dalam aliran teks yang berjalan. Dengan demikian, ini merupakan kombinasi dari elemen blok dan inline.
• list-item – elemen ditampilkan sebagai elemen blok. Namun, sebelumnya ditambahkan tanda pembuatan daftar.
• run-in – menciptakan elemen blok atau inline, tergantung pada konten.
• table – terlihat seperti elemen tabel HTML yang dikenal.
• inline-table – bertindak seperti elemen HTML tabel, tetapi inline.
• table-row – elemen ini berisi elemen anak yang sejajar. Berfungsi seperti elemen HTML tr.
• table-cell – elemen ini mewakili sel tabel dan berfungsi seperti kedua elemen HTML th dan td.
• table-row-group – elemen ini berisi kelompok elemen dengan beberapa elemen anak sejajar, berperilaku seperti elemen tbody HTML.
• table-header-group – elemen ini berisi kelompok elemen dengan beberapa elemen anak sejajar, berperilaku seperti elemen thead HTML.
• table-footer-group – elemen ini berisi kelompok elemen dengan beberapa elemen anak sejajar, berperilaku seperti elemen tfoot HTML.
• table-column – di sini, properti sel satu kolom dijelaskan. table-column berperilaku seperti elemen kol dari HTML.
• table-column-group – elemen ini berisi grup elemen untuk menjelaskan properti sel satu kolom. Berperilaku seperti elemen colgroup HTML.
• table-caption – melalui sini judul tabel didefinisikan. Properti ini berperilaku seperti elemen HTML caption.
Sesungguhnya, CSS menyediakan berbagai opsi tampilan yang berbeda untuk berbagai jenis elemen. Ini memiliki peran kunci dalam konteks penempatan elemen. Lebih lanjut akan dibahas dalam tutorial berikutnya.
