Menggunakan Properti display dalam CSS
Anda sudah tahu bahwa semua tag termasuk dalam model blok tertentu. Namun jika diinginkan, model dapat diubah menggunakan properti display.
Dengan nilai block dari properti ini, elemen dapat dibuat sebagai blok, dan dengan nilai inline - sebagai sebaris.
Mari kita buat tag span berperilaku seperti elemen blok:
<span>text</span>
<span>text</span>
<span>text</span>
span {
display: block;
width: 100px;
height: 100px;
border: 1px solid red;
margin-bottom: 20px;
}
:
Dan sekarang mari kita buat tag div berperilaku seperti sebaris:
<div>text</div>
<div>text</div>
<div>text</div>
div {
display: inline;
width: 100px;
height: 100px;
border: 1px solid red;
}
:
Misalkan Anda memiliki beberapa paragraf dalam kode HTML. Buatlah mereka berperilaku seperti elemen sebaris.
Misalkan Anda memiliki beberapa tautan dalam kode HTML. Buatlah mereka berperilaku seperti elemen blok. Berikan mereka border, lebar, dan tinggi.