Pelajari properti CSS display untuk mengontrol bagaimana elemen ditampilkan di halaman.

CSS Display

Properti display adalah salah satu properti paling penting di CSS. Ia menentukan bagaimana sebuah elemen ditampilkan pada halaman.

1. Nilai `block`

Elemen dengan display: block akan mengambil seluruh lebar baris dan dimulai di baris baru.

<style>
  div {
    display: block;
    background-color: lightblue;
    padding: 10px;
    margin-bottom: 10px;
  }
</style>
 
<div>Elemen Block</div>
<div>Elemen Block lainnya</div>

2. Nilai `inline`

Elemen dengan display: inline tidak memulai baris baru dan hanya selebar kontennya.

<style>
  span {
    display: inline;
    background-color: lightgreen;
    padding: 10px;
  }
</style>
 
<span>Elemen Inline</span>
<span>Elemen Inline lainnya</span>

3. Nilai `inline-block`

inline-block mirip dengan inline, tapi memungkinkan kita mengatur width dan height.

<style>
  div {
    display: inline-block;
    width: 150px;
    height: 100px;
    background-color: lightcoral;
    margin-right: 10px;
  }
</style>
 
<div>Box 1</div>
<div>Box 2</div>

4. Nilai `none`

display: none menyembunyikan elemen dari halaman sepenuhnya.

<style>
  p {
    display: none;
  }
</style>
 
<p>Ini tidak akan terlihat.</p>

Dengan display, Anda dapat mengatur layout elemen dengan fleksibel sesuai kebutuhan.

CSS Display

CSS Display

1. Nilai block

2. Nilai inline

3. Nilai inline-block

4. Nilai none

On this page

1. Nilai `block`

2. Nilai `inline`

3. Nilai `inline-block`

4. Nilai `none`