CSS - Display inline, block, dan inline-block

Materi ini sebenarnya masih termasuk bagian dari CSS display. Property display ini dalam aplikasinya memiliki banyak value, namun kebanyakan webmaster lebih cenderung menggunakan 3 buah value saja yaitu inline, block, dan inline-block.

Elemen apapun yang ada di tampilan web, anda bisa berkreasi dengannya. Anda bisa bermain hanya dengan elemen tertentu yang Anda campur di sana atau mungkin berkreasi dengan span.

Jadi mari kita uji coba, saya punya ukuran tinggi dan lebar pada elemen span saya tapi tidak terlalu besar. Bagaimana mengubahnya? Jika nampak inline disana. Inline ini apa maksudnya. Oke, pengertiannya begini, Display inline artinya mengalir ke samping, jadi konten HTML ketika diberikan display inline, akan mengalir ke samping. Sehingga elemen ini memenuhi tempat yang ada di sampingnya, dan jika mentok ke samping, konten HTML akan mengisi ke bawahnya. Banyak contoh default dari elemen HTML yang inline seperti image, span yang menjadi contoh kasus kita sekarang. Permasalahannya adalah ketika tampilan anda terdapat display inline, CSS tidak bisa diberi property width dan height.


<style type="text/css">
    .inline {display:inline;}
</style>

<span class="inline">Tampilan display:inline. </span>
<span class="inline">Hasilnya mengalir kesamping. </span>
<span class="inline">Tampilan kesamping</span>
Hasilnya:

inline1

Terlihat dari result diatas, ketika ruang disamping tidak punya ruang lagi, perintah atau kalimat selanjutnya akan mengisi ruang dibawahnya. Saya kira sampai disini anda sudah paham tentang display inline ini.

Kita lanjutkan, jika ada sesuatu yang inline, tapi Anda ingin memberinya ketinggian dan lebar, kami bisa menampilkan. Tadi sudah dibahas bahwa display inline, CSS tidak bisa diberi property width dan height. Disinilah saya akan menjelaskan kegunaan inline-block. Dan Boom, span saya miliki diambil pada properti tersebut. Jadi sebelumnya ketika mereka inline, ukurannya kecil. Ketika saya gunakan blok inline, Saya bisa membentuknya dengan sangat baik. Dan jika saya mengubahnya untuk lakukan block, Anda dapat melihat hasilnya bahwa display inline-block

akan membentuk ruang sendiri, tidak lagi berada disebelah display ini. Pada intinya display inline-block merupakan jenis display yang sangat mirip dengan display inline, namun display inline-block berguna dalam mengatur tinggi dan lebar seleksinya.

Perhatikan contoh ini:

<style type="text/css">
    .inline {display:inline; color:white;background-color:yellow;width:400px;height:100px
}
    .inline-block {display:inline-block; color:white; background-color:blue;width:400px;height:100px
}

</style>

<span class="inline">Tampilan display inline. Text akan muncul apa adanya </span>
<span class="inline">Dan text mengalir kesamping</span>
<span class="inline-block">Contoh display ini dengan background kuning </span>
Hasilnya:

inline2

Nampak dari result jika inline yang kita beri ukuran lebar dan tinggi tidak punya pengaruh apa-apa malah text muncul apa adanya. Namun ketika menggunakan inline-block kita bisa mengatur lebar dan tinggi suatu elemen. Saya kira kegunaan inline dan inline-block bisa dipahami sampai disini.

Bagaimana dengan display block? Block ini merupakan kebalikan dari display inline, dimana konten HTML yang diberikan display block akan mengambil tempat secara block atau penuh ke kanan, sehingga kalau terdapat konten lagi akan ditampilkan di bawahnya. Mari kita lihat contoh berikut:

<style type="text/css">
    .inline {display:inline; color:white;background-color:yellow;width:400px;height:100px
}

.block {display:block; color:white; background-color:red;width:400px;height:30px
}

    .inline-block {display:inline-block; color:white; background-color:blue;width:200px;height:30px
}

</style>

<span class="inline">Tampilan display inline. Text akan muncul apa adanya </span>
<span class="inline">Dan text mengalir kesamping</span>
<span class="block">Tampilan display block kebalikan dari inline.</span>
Bagian yang diberi display block akan full satu baris digunakan, sedang konten selanjutnya ditampilkan dibawah

<span class="inline-block">Contoh display inline-block</span>
Beda dengan block, konten akan dilanjutkan setelahnya

Hasilnya:

inline3

Jadi hal yang menarik untuk dilakukan dan Anda bisa menggunakannya nanti jika anda tidak ingin meninggalkan ruang putih besar, bisa menggunakan 3 properti display ini. Jadi tidak ada cara yang bagus untuk merasa nyaman dengan tampilan sampai Anda mencoba semua kode ini dalam mendesain tampilan web.Anda harus coba, Apa yang terjadi jika inline? Apa yang terjadi jika blok inline? Apa yang terjadi jika itu span? Dan benar-benar memperhatikan fakta bahwa itu tidak cukup untuk mengetahui untuk apa tampilan satu elemen itu Anda kerjakan

Secara simple, display pada CSS bisa anda pilih pada element HTML yang di inginkan kemudian dan property display dengan value inline, block, atau inline-block. Contohnya :


<!DOCTYPE html>
<html>
    <head>
        <title>Display CSS</title>
        <style>
            a{
                display: block;
            }

            h2{
                display: inline;
            }

            span{
                display: block;
            }

            img{
                display: block;
            }
            #box{
                width:100px;
                height:100px;
                background:yellow;
                display: inline;
            }
            p{
                display: inline;
            }

            #link{
                display: inline-block;
                width: 100px;
                height: 100px;
                background:gray;
            }
            #box2{
                display: inline-block;
                width: 100px;
                height: 100px;
                background:green;
            }
            #span{
                display: inline-block;
                width: 100px;
                height: 100px;
                background:blue;
            }
        </style>
    </head>
    <body>

        <h1><u>Contoh inline Menjadi block:</u></h1>
            <a href="#">Tag Link</a>
                        <span>tag span</span>

        <br>
        <h1><u>Contoh Display block Menjadi inline:</u></h1>
            <h2>Tag Heading h1 sampai h6</h2>
            <div id="box">Tag Div</div>
            <p>Tag Paragraf</p>

        <br>
        <h1><u>Contoh Display inilne-block:</u></h1>
            <a href="#" id="link">Tag Link</a>
            <div id="box2">Tag Div</div>
            <span id="span">Ini Tag span</span>

    </body>
</html>

Hasilnya:

inline4