Dimensi Dan Display Pada CSS |Kita Ngoding CSS#13|

Dimensi Dan Display CSS.- Pada Tutorial CSS kali ini, admin akan membahas tentang Cara Mengatur Size(Dimensi) dari elemen, dan Cara Mengatur Tampilan(Display) elemen. Bagaimana penjelasannya?. simak baik-baik tulisan admin berikut ini.

Namun sebelum melanjutkan, admin ingin mengucapkan banyak-banyak terimakasih kepada kalian yang telah berkunjung pada blog Kita Ngoding. Semoga tulisan-tulisan admin pada blog ini dapat berguna bagi admin secara khusus serta berguna bagi siapapun yang membutuhkan termasuk kalian yang sedang membaca artikel ini.

Dimensi Dan Display Pada CSS |Kita Ngoding CSS#13|

Dimensi Pada CSS

Size (Dimensi) Pada CSS merupakan atribut yang dapat memungkin kalian untuk mengontrol tinggi dan lebar suatu element, juga dapat digunakan untuk menambah spasi.

Untuk lebih singkat dan jelasnya, silahkan kalian perhatikan tabel dibawah ini.

Nama Attributes	Penjelasan
height	Mengatur tinggi dari sebuah elemen
line-height	Mengatur tinggi garis
max-height	Mengatur tinggi maksimal dari sebuah elemen
max-width	Mengatur lebar maksimal dari sebuah elemen
min-height	Mengatur tinggi minimum dari sebuah elemen
min-width	Mengatur lebar minimum dari sebuah elemen
width	Mengatur lebar dari sebuah elemen

Baca Juga : Struktur Syntax CSS

Tampilan (Display) Pada CSS

Elemen pada CSS dapat kita atur, apakah ingin menampilkan sebuah elemen tersebut atau malah menyembunyikan elemen yang ada.

Terdapat 2 cara yang dapat digunakan untuk mengatur elemen tersembunyi atau tidak yaitu :

Display: none, berfungsi menyembunyikan elemen dan dapat mempengaruhi tata letak atau kedudukannya pada struktur HTML. Jadi elemennya seperti menghilang ditelan bumi J
Visibility: hidden, berfungsi menyembungikan elemen tanpa mempengeruhi tata letak atau kedudukannya pada HTML. Artinya elemennya tetap ada pada posisi yang ditentukan sebelumnya hanya saja tidak ditampilkan.

Selain nilai none, CSS Display juga memiliki berbagai macam nilai yang dapat diberikan untuk melakukan berbagai fungsi seperti nilai inline dan block.

Selengkapnya kalian dapat melihat contoh dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1.hidden{
            display: none;
        }
        h2.hidden{
            visibility: hidden;
        }
        /*inline : membuat elemen menjadi satu baris*/
        li {
            display: inline;
        }
        /*block : membuat elemen menjadi baris baru (seperti dienter kebawah)*/
        span{
            display: block;
        }
    </style>
</head>
<body>
    <h1 class="hidden">display</h1>
    <h2 class="hidden">visibility</h2>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <p>Lorem consectetur, <span>adipisit. </span> Ae <span>vero illo n</span> es</p>
</body>
</html>

Baca Juga : Pengenalan HTML Dasar

Setelah kalian membuat kode HMTL + CSS diatas, silahkan kalian jalankan dan kemudian kalian bisa melihat perbedaanya serta cara menggunakannya.

Admin rasa sudah cukup untuk pertemuan kita pada kesempatan kali ini, silahkan kunjungi link kami dibawah ini untuk mengetahui lebih banyak tentang CSS.

Dimensi Dan Display Pada CSS |Kita Ngoding CSS#13|

Dimensi Pada CSS

Tampilan (Display) Pada CSS

0 Response to "Dimensi Dan Display Pada CSS |Kita Ngoding CSS#13|"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel