Fungsi Properti CSS Display

Halo teman-teman WebHozz, kita jumpa lagi. Oke apakabar kalian semoga sehat semua yah,.. he..he.. Oke kali ini kita akan mencoba memahami apa itu Properti Display pada CSS oke siap yah.

Mungkin dari kalian akan bertanya-tanya fungsinya apasih Properti Display pada CSS oke. Perlu kita ketahui Display yang akan kita coba disini meliputi Properti CSS Display Inline dan Blok.

Ada beberapa Tag elemen bertipe Blok dan dan tidak bertipe Blok apa sajakah itu teman-teman, oke untuk Tag elemen bertipe Blok itu seperti <h1><p><div><li> nah untuk yang bertipe tidak Blok itu ada <span><a>, agak bingung ya pastinya oke langsung saja kita coba.

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS Display</title>
    <style>
        h1{
            background-color: #002a80;
            color: #ffff00;
        }
        a{
            background-color: #004000;
            color: #ffff00;
        }
    </style>
</head>
<body>

    <h1>Tulisan Tipe Blok</h1>
    <a>Tulisan Non Blok</a>

</body>
</html>

Nah sekarang kita akan coba balik dengan menggunakan CSS Display

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS Display</title>
    <style>
        h1{
            background-color: #002a80;
            color: #ffff00;
            display: inline;
        }
        a{
            background-color: #004000;
            color: #ffff00;
            display: block;
        }
    </style>
</head>
<body>

    <h1>Tulisan Tipe Blok</h1>
    <a>Tulisan Non Blok</a>

</body>
</html>

nah kalian modifikasi dengan menambahkan CSS Display pada Tag <h1> dan <a> hasilnya akan seperti berikut ini:

Nah sekarang kalian sudah pahan bukan apa itu Display pada CSS, ya benar teman-teman ketika kita memberikan properti display blok artinya itu akan memblok seluruh tag, berbeda dengan inline yang hanya sebagian saja atau hanya di tag yang di beri elemen inline.

Related posts: