Belajar CSS - Display Inline, block dan inline-block pada CSS
Dalam pembuatan Website yang cantik dan rapih, pasti kita sangat butuh sebuah Property Display, mulai dari Display , Inline, block, maupun inline-block selain itu teman teman, masih banyak lagi nilai dari property display.
Baik teman teman kita akan langsung masuk ke pembahasan mengenai Judul diatas.
Display inline-block
Oke Teman Teman selamat datang kembali di Awonapa Jr, di materi artikel sebelumnya kita sudah membahas tentang Dimensi Elemen, jika teman teman ingin mengulas kembali silahkan..
BELAJAR CSS | Dimensi Elemen Tinggi dan Lebar pada CSS
 |
| Property Display CSS |
Baik teman teman kita akan langsung masuk ke pembahasan mengenai Judul diatas.
Pembahasan
- Pengertian Display
- Display Inline
- Display Block
- Display Inline-block
Nah diatas adalah beberapa hal yang akan kita bahas pada kesempatan kesekian kali ini.
1. Pengertian Display
Kalau menurut sebuah Toko, Display itu artinya ya tata letak yang berfungsi untuk menarik perhatian pengunjung atau pembeli
Mungkin kalau disamakan dengan sebuah Property Display CSS mungkin sama saja yaitu untuk mengatur tata letak sebuah website.
2. Display Inline
Pengertian Display Inline itu sendiri adalah , Mengalir kesamping, yang artinya adalah semua konten yang diberikan display inline akan mengalir kesamping, jadi gini maksudnya.
Jika terdapat sebuah box yang berukuran tidak terlalu lebar atau tidak memenuhi layar dan di samping layar tersebut masih ada tempat yang kosong, maka ia akan mengisi terlebih dahulu bagian yang kosong tersebut. dan jika sudah full maka baru akan mengisi ke bagian bawah nya.Pada beberapa Tag HTML bawaan yang memiliki display Inline contoh nya, tag link, span, image dan lainnya.
/*index.html*/
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
<style>
.header {
text-align: center;
margin: 10px auto;
}
#box1 {
width: 100px;
height: 100px;
margin: 20px;
padding: 10px;
display: inline;
text-align: center;
color: white;
background: #2343F3;
}
#box2 {
margin: 20px;
padding: 10px;
display: inline;
text-align: center;
color: white;
background: #FF0000;
}
#box3 {
margin: 20px;
padding: 10px;
display: inline;
text-align: center;
color: white;
background: #000000;
}
</style>
</head>
<body>
<div class="header">
<h1>Display CS</h1>
</div>
<fieldset>
<legend><h2>1. Display Inline</h2></legend>
<div>
<div id="box1">Display Inline</div>
<div id="box2">Display Inline</div>
<div id="box3">Display Inline</div>
</div>
</fieldset>
</body>
</html>
Jika di perhatikan pada box1 kita menggunakan width dan height, dan pada box2 dan box3 kita tidak menggunakan width dan height.
Display Inline
Display Inline
Display Inline
Dan coba diperhatikan, kenapa hasilnya sama? karena pada display inline width dan height tidak berpengaruh. kecuali pada img. mungkin seperti itu.
3. Display Block
Dan untuk pengertian Display Block maksudnya yaitu , sebuah box akan mengalir kebawah ( kebalikan dari inline ) , nah jadi seperti ini, sebuah konten atau di ibaratkan sebuah box yang akan mengalir kebawah , alias tidak mengalir ke samping , langsung kebawah walaupun masih ada tempat kosong di bagian halaman tersebut.
Contoh display block, yaitu heading (h1), paragraph (p), <li>, <div> dan itulah beberapa contoh display block.
/*index.html*/
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
<style>
.header {
text-align: center;
margin: 10px auto;
}
#box1 {
width: 100px;
height: 100px;
margin: 20px;
padding: 10px;
display: block;
text-align: center;
color: white;
background: #2343F3;
}
#box2 {
width: 200px;
height: 100px;
margin: 20px;
padding: 10px;
display: block;
text-align: center;
color: white;
background: #FF0000;
}
#box3 {
width: 150px;
height: 100px;
margin: 20px;
padding: 10px;
display: block;
text-align: center;
color: white;
background: #000000;
}
</style>
</head>
<body>
<div class="header">
<h1>Display CS</h1>
</div>
<fieldset>
<legend><h2>1. Display Block</h2></legend>
<div>
<div id="box1">Display Block</div>
<div id="box2">Display Block</div>
<div id="box3">Display Block</div>
</div>
</fieldset>
</body>
</html>
dan untuk hasilnya adalah seperti ini....
Display Block
Display Block
Display Block
4. Display inline-block
Untuk yang terakhir ini adalah Display inline-block, yaitu gabungan dari inline dan block, maka hasil yang akan ditampilkan adalah mengalir kesamping dan seperti block.
/*index.html*/
<html>
<head>
<meta charset="UTF-8">
<title>Index</title>
<style>
.header {
text-align: center;
margin: 10px auto;
}
#box1 {
width: 100px;
height: 100px;
margin: 20px;
padding: 10px;
display: inline-block;
text-align: center;
color: white;
background: #2343F3;
}
#box2 {
width: 200px;
height: 100px;
margin: 20px;
padding: 10px;
display: inline-block;
text-align: center;
color: white;
background: #FF0000;
}
#box3 {
width: 150px;
height: 100px;
margin: 20px;
padding: 10px;
display: inline-block;
text-align: center;
color: white;
background: #000000;
}
</style>
</head>
<body>
<div class="header">
<h1>Display CS</h1>
</div>
<fieldset>
<legend><h2>1. Display Inline-Block</h2></legend>
<div>
<div id="box1">Display Inline-Block</div>
<div id="box2">Display Inline-Block</div>
<div id="box3">Display Inline-Block</div>
</div>
</fieldset>
</body>
</html>
Display inline-block
Display inline-block
Display inline-block
Nah itulah teman teman Pembahasan kita pada kesempatan ini dengan judul Display Inline, block dan inline-block pada CSS. Semoga bermanfaat teman teman.
Salam Semangattt!!
Posting Komentar untuk "Belajar CSS - Display Inline, block dan inline-block pada CSS"