Mengenal Display Properti Pada CSS

Display property dalam CSS adalah untuk mengontrol tipe tata letak atau tampilan dari elemen HTML. Ini menentukan bagaimana elemen akan ditampilkan di halaman web. Nilai dari display property ada 4 yang kita akan bahas berikut ini :

  • Display block

  • Display inline

  • Display inline-block

  • Display flex

Display block

Display block adalah untuk membuat elemen itu sendiri menjadi block, sehingga akan memulai baris baru dan mengisi seluruh lebar kontainer yang tersedia.

Display inline

Display Inline adalah memungkinkan elemen untuk tampil dalam satu baris dengan elemen lainnya, tanpa memulai baris baru.

Display inline-block

Display Inline-block adalah untuk menampilkan elemen sebagai blok, tetapi masih memungkinkan elemen lain untuk berada dalam satu baris dengannya, dan membuat elemen memenuhi hanya lebar yang diperlukan.

Display Flex

Display Flex adalah untuk mengubah elemen menjadi kontainer flex, sehingga memungkinkan untuk pengaturan tata letak yang lebih fleksibel menggunakan propertinya, seperti flex-direction, justify-content, dan align-items.

Contoh Penggunaan Display Properti Pada CSS

Buat project baru dengan nama file index.html dan style.css seperti berikut ini :

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Poperty</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h3>Display Inline</h3>
    <div>
        <p>Hari ini mendung tetapi panas</p>
        <p>jalan jombang lagi diaspal</p>
    </div>
    <h3>Display Block</h3>
    <div class="dua">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis dignissimos aliquid doloremque exercitationem consequatur temporibus, 
            <img src="img/movie-1.jpg" alt=""> reiciendis ratione earum reprehenderit eaque voluptatum voluptate molestias fugit magni nam aliquam alias excepturi? Vel.</p>
    </div>
    <h3>Display Inline-Block</h3>
    <div class="tiga">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. <i> Iure dignissimos harum unde porro pariatur quod alias libero beatae facere officiis.</i>
    </div>
    <h3>Display Flex</h3>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

style.css

body{
    font-family: Arial;
    background-color: tomato;
}

/* Display Inline */
div p{
    display: inline; /*mensejajarkan baris/konten*/
    background-color: springgreen;
}

/* Display Block */
.dua p{
    background-color: black;
    color: white;
}
.dua p img{
    height: 50px;
    display: block; /*membuat baris baru*/
}

/* Display Inline-Block */
.tiga{
    color: white;
}
.tiga i{
    color: steelblue;
    display: inline-block; /*fungsi gabungan dari inline dengan block*/
}
/* Display Flex */
.container{
    background-color: whitesmoke;
    width: 500px;
    display: flex;  /*flex untuk membuat agar contetnt sejajar/responsive*/
    justify-content: center; /*membuat elemen tengah*/
    text-align: center;
    flex-wrap: wrap; /*untuk membuat content agar turun kebawah saat luas width sudah habis*/
}
.container div{
    background-color: olivedrab;
    height: 100px;
    width: 150px;
    margin: 10px;
}

Tambahkan folder img seperti berikut ini :

Setelah itu running maka hasil nya akan seperti berikut ini :

Subscribe

Related articles

Web Developer | Pengalaman Magang di Udacoding

Udacoding menjadi salah satu tempat, dimana peserta magang...

Segala Hal yang Perlu Kamu Tahu tentang Dark Theme

Ngomongin mode gelap, kayaknya sekarang lagi jadi yang hits...

TinyMCE: Solusi Praktis untuk Konten Web yang Lebih Interaktif

TinyMCE adalah alat untuk membuat dan mengedit teks di...

LEAVE A REPLY

Please enter your comment!
Please enter your name here