Mengenal Display Properti Pada CSS

HTML
Web

Mengenal Display Properti Pada CSS

uda_faisal

November 29, 2023

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 :