CSS Lanjutan

 Display Pada Elemen Memiliki 2 Jenis, yaitu:

   a. elemen Block 

Saat ditampilkan, blok elemen pada HTML akan memenuhi kapasitas maksimal dari lebar komponen atasnya. Misalkan komponen utama browser memiliki lebar 1140px, maka blok elemen akan memenuhinya.

  

 b. elemen Inline

Sedangkan inline element tidak akan memenuhi ruang horizontal saat ditampilkan tampilannya hanya akan memanjang sesuai dengan ukuran konten.

2. Properti 

   a. fLoat

atribut float sebagai contoh : pada element gambar, membuat gambar terletak ke samping dan text akan menjorok mengikuti elemen gambar

See the Pen Untitled by helio (@stellarfantasy) on CodePen.

   b. overflow

Fungsi dari properti overflow pada CSS adalah untuk mengontrol konten yang terlalu besar atau melewati batas yang telah ditentukan untuk dimasukkan ke dalam suatu area.

   c. border-radius

Untuk membuat sudut membulat, sudut melengkung atau rounded corner, di CSS3 kita menggunakan property border-radius. Nilai untuk property berupa satuan panjang seperti pixel, atau em. Semakin tinggi nilainya, semakin melengkung efek yang dihasilkan.

   d. display:inline-block

Inline-block adalah display suatu elemen html yang tetap bergerak Horizontal, dan tidak menambahkan baris baru untuk elemen selanjutnya, tetapi ukuran Width dan Height dari masing-masing elemen dapat kita atur.

3. Membuat Jarak Diluar dan Didalam Border menggunakan :

   a. margin

margin digunakan untuk mengaplikasikan jarak tepi pada sebuah elemen bagian luar (tepi garis luar). Margin memiliki 4 macam penjabaran yang dapat digunakan secara terpisah sendiri-sendiri, yaitu: 

1. margin-top
2. margin-right
3. margin-bottom
4. margin-left.

   b. padding

padding berada di luar dari konten, sehingga nilai yang diberikan untuk ketiganya akan berpengaruh menambah luas area dari elemen HTML.

Padding tak memiliki unsur warna, tetapi keberadaannya dipengaruhi oleh unsur warna dari latar belakang suatu elemen yang dinaunginya.