display: inline vs display: block

Apa perbedaan mendasar antara CSS berikut:

display:inline

dan ini:

display:block

Menggunakan ini secara terpisah pada suatu elemen, saya mendapatkan hasil yang sama.

tampilan: blok berarti bahwa elemen ditampilkan sebagai blok, seperti paragraf dan header selalu. Blok memiliki spasi putih di atas dan di bawahnya dan tidak mentolerir elemen HTML di sebelahnya, kecuali jika dipesan sebaliknya (dengan menambahkan deklarasi float ke elemen lain, misalnya).

display: inline berarti elemen ditampilkan inline, di dalam blok saat ini pada baris yang sama. Hanya ketika berada di antara dua blok, elemen membentuk 'blok anonim', yang memiliki lebar sekecil mungkin.

Baca lebih lanjut tentang opsi tampilan: http://www.quirksmode.org/css/display.html

Blok

Mengambil lebar penuh yang tersedia, dengan baris baru sebelum dan sesudah (tampilan: blok;)

Di barisan

Mengambil lebar hanya sebanyak yang dibutuhkan, dan tidak memaksa garis baru (tampilan: inline;)

display: block - pemutusan garis sebelum dan sesudah elemen

display: inline - tidak ada garis putus sebelum atau sesudah elemen

Ini adalah tabel perbandingan:

Anda dapat melihat contoh di sini.

display: block;menciptakan elemen level blok , sedangkan display: inline;menciptakan elemen level inline . Agak sulit untuk menjelaskan perbedaannya jika Anda tidak terbiasa dengan model kotak css, tetapi cukup untuk mengatakan bahwa elemen level blok memecah aliran dokumen, sedangkan elemen inline tidak.

Beberapa contoh elemen-elemen tingkat blok meliputi: div, h1, p, dan hrHTML tag.

Beberapa contoh elemen-elemen tingkat inline meliputi: a, span, strong, em, b, dani HTML tag.

Secara pribadi, saya suka menganggap elemen sebaris sebagai elemen tipografi . Ini tidak sepenuhnya atau secara teknis benar, tetapi sebagian besar elemen inline berperilaku sangat mirip teks.

Anda dapat membaca lebih banyak artikel melalui topik di sini . Melihat beberapa orang lain di utas ini telah mengutipnya, mungkin layak dibaca.

Tampilan: blok akan mengambil seluruh garis yaitu tanpa putus garis

Tampilan: inline hanya akan mengambil ruang persis yang dibutuhkan.

 #block
  {
   display : block;
   background-color:red;
   border:1px solid;
  }

 #inline
 {
  display : inline;
  background-color:red;
  border:1px solid;
 }

Anda dapat merujuk contoh di biola ini http://jsfiddle.net/RJXZM/1/ .

blokir elemen diperluas untuk mengisi induknya.

kontrak elemen inline menjadi cukup besar untuk menampung anak-anak mereka.

tampilan: blok

mengambil seluruh baris (100%) layar, selalu 100% dari ukuran layar

contoh tampilan blok

display: inline-block membutuhkan lebar sebanyak yang diperlukan, bisa 1%-hingga 100% dari ukuran layar

tampilkan contoh inline-block

itu sebabnya kami memiliki div dan span

Gaya penataan standar Div adalah tampilan blok: dibutuhkan seluruh lebar layar

span default styling is display: blok inline: span tidak dimulai pada baris baru dan hanya membutuhkan lebar sebanyak yang diperlukan

Tambahkan warna latar belakang ke elemen dan Anda akan dengan baik melihat perbedaan inline vs block, seperti yang dijelaskan oleh poster lain.

Tampilkan: blok Ini sangat berperilaku seperti tag 'p' dan mengambil seluruh baris dan tidak ada elemen di sebelahnya sampai itu melayang. Tampilan: inline Ini hanya menggunakan ruang sebanyak yang diperlukan dan memungkinkan elemen lain disejajarkan bersama.

Gunakan properti ini jika bentuk dan Anda akan mendapatkan pemahaman yang lebih baik.

blok atau blok-inline dapat memiliki lebar (mis. lebar: 400px) sedangkan elemen inline tidak dipengaruhi oleh lebar. elemen inline dapat menjangkau ke baris teks berikutnya (contoh http://codepen.io/huijing/pen/PNMxXL mengubah ukuran jendela browser Anda untuk melihatnya) sementara elemen blok tidak bisa.

 .inline {
      background: lemonchiffon;
      div {
        display: inline;
        border: 1px dashed darkgreen;
      }

Elemen Blok : Elemen yang disukai div, p, heading adalah level blok. Mereka mulai dari baris baru dan menempati lebar penuh elemen induk. Elemen Inline : Elemen menyukai b, i, span, img adalah level inline. Mereka tidak pernah memulai dari baris baru dan menempati banyak konten.

Secara default, elemen sebaris tidak memaksa baris baru untuk memulai dalam aliran dokumen. Elemen blok, di sisi lain, biasanya menyebabkan terputusnya garis Anda dapat merujuk tautan ini