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

Memahami Microservices dengan Laravel

Microservices adalah pendekatan dalam pengembangan perangkat lunak di mana...

Tailwind CSS: Panduan Lengkap dan Keunggulannya

Tailwind CSS adalah salah satu framework CSS yang semakin...

Bagaimana sih cara menjadi Web Developer?

Memulai Karier sebagai Web Developer Meskipun sudah mengetahui berbagai keterampilan...

Laravel 11 : Send Mail by Gmail SMTP

Mengirim Email Menggunakan Gmail SMTP di Laravel 11 Mengirim email...

Cara mendapatkan Kredensial token email

Mendapatkan Credential Token Email di Laravel Dalam aplikasi web modern,...

LEAVE A REPLY

Please enter your comment!
Please enter your name here