Setiap elemen HTML yang kita buat memiliki property css display, pada slide ini akan dibahas bagaimana masing-masing perilaku dari value pada properti display tersebut. value yang dapat digunakan adalah : - inline - inline-block - block - none slide bantuan untuk video youtube: https://youtu.be/VPaIdiPvWQM

1. display
CSS
@sandhikagalih

2. <div> & <span>

3. http://htmldog.com/guides/html/intermediate/spandiv/
tag pada HTML digunakan untuk memberikan
‘maksud’ / ‘arti’ pada sebuah konten (p untuk paragraf, h1
untuk heading utama, dll).
Tag <div> dan <span> tidak memiliki ‘arti’ apapun,
keduanya digunakan untuk mengelompokkan tag-tag
HTML dan memberikan informasi terhadap tag-tag
tersebut.
“

4. <div>

9. <span>

14. hubungannya dengan
display?

17. CSS
display

18. https://css-tricks.com/almanac/properties/d/display/
setiap tag pada HTML berada di dalam sebuah
kotak. properti display pada CSS mengatur
perilaku dari kotak tersebut.
“

19. https://developer.mozilla.org/en-US/docs/Web/CSS/display
setiap tag pada HTML memiliki nilai default untuk
properti display.Tetapi kita juga dapat
mengubah perilaku dari tag tersebut dengan
mengganti value-nya.
“

20. display
inline
inline-block
block
none

21. display
inline
inline-block
block
none

22. inline

23. inline
• Elemen HTML yang secara default tidak menambahkan baris baru
ketika dibuat

24. inline
• Elemen HTML yang secara default tidak menambahkan baris baru
ketika dibuat
• Lebar dan tinggi elemennya sebesar konten yang ada di
dalamnya

25. inline
• Elemen HTML yang secara default tidak menambahkan baris baru
ketika dibuat
• Lebar dan tinggi elemennya sebesar konten yang ada di
dalamnya
• Kita tidak dapat mengatur tinggi dan lebar dari elemen inline

26. inline
• Elemen HTML yang secara default tidak menambahkan baris baru
ketika dibuat
• Lebar dan tinggi elemennya sebesar konten yang ada di
dalamnya
• Kita tidak dapat mengatur tinggi dan lebar dari elemen inline
• Margin dan padding hanya mempengaruhi elemen secara
horizontal, tidak vertikal

27. elemen inline
b, strong, i, em,
a, span, sub, sup,
button, input, label,
select, textarea,
…
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente

31. Tidak terpengaruh oleh
width dan height

32. inline-block

33. inline-block
• Tidak ada elemen yang secara default memiliki properti
display: inline-block;

34. inline-block
• Tidak ada elemen yang secara default memiliki properti
display: inline-block;
• Kita harus ubah secara manual properti tersebut

35. inline-block
• Tidak ada elemen yang secara default memiliki properti
display: inline-block;
• Kita harus ubah secara manual properti tersebut
• Perilaku dasarnya sama dengan elemen inline

36. inline-block
• Tidak ada elemen yang secara default memiliki properti
display: inline-block;
• Kita harus ubah secara manual properti tersebut
• Perilaku dasarnya sama dengan elemen inline
• Perbedaanya, elemen inline-block dapat kita atur tinggi dan
lebar-nya

38. Terpengaruh oleh width
dan height

39. block

40. block
• Elemen HTML yang secara default menambahkan baris baru
ketika dibuat

41. block
• Elemen HTML yang secara default menambahkan baris baru
ketika dibuat
• Jika tidak diatur lebar-nya, maka lebar default dari elemen block
akan memenuhi lebar dari browser / parent-nya

42. block
• Elemen HTML yang secara default menambahkan baris baru
ketika dibuat
• Jika tidak diatur lebar-nya, maka lebar default dari elemen block
akan memenuhi lebar dari browser / parent-nya
• Kita dapat mengatur tinggi dan lebar dari elemen block

43. block
• Elemen HTML yang secara default menambahkan baris baru
ketika dibuat
• Jika tidak diatur lebar-nya, maka lebar default dari elemen block
akan memenuhi lebar dari browser / parent-nya
• Kita dapat mengatur tinggi dan lebar dari elemen block
• Di dalam elemen block, kita dapat menyimpan tag dengan
elemen inline, inline-block, atau bahkan elemen block lagi

44. elemen block
h1-h6, p, ol, ul, li
form, hr, div,
…
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

46. none
Digunakan untuk menghilangkan sebuah elemen

47. none

48. none

49. mengubah display

51. defaultnya block

52. defaultnya block
Berubah menjadi inline

53. xièxie.
sandhikagalih@unpas.ac.id