display: inline vs display: block

Jawaban:

123

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

Pranay Rana
sumber
1
Apakah ada elemen yang sebaris secara default? Menjangkau?
eshellborn
1
<span> <a> dan <img>
EKanadily
80

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;)

Mencabuli
sumber
40

display: block - pemutusan garis sebelum dan sesudah elemen

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

xj9
sumber
23

Ini adalah tabel perbandingan:masukkan deskripsi gambar di sini

Anda dapat melihat contoh di sini.

Niko Bellic
sumber
13

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.

Damien Wilson
sumber
8

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/ .

Aarthi
sumber
1
luar biasa ... ini yang saya cari
Vicky
7

blokir elemen diperluas untuk mengisi induknya.

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

James Curran
sumber
5

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

Harshit
sumber
itu sebabnya kami memiliki div dan span - yang ini adalah Awesome bro :-)
Siva
1

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

Janick Bernet
sumber
1

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.

kunal
sumber
0

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;
      }
EKanadily
sumber
Bunyinya seperti ini seharusnya menjadi jawaban untuk salah satu dari delapan jawaban lain pada pertanyaan ini. Saya tidak tahu yang mana.
Quentin
kebanyakan dari mereka. hanya menambah info.
EKanadily
0

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.

Avinash Malhotra
sumber
0

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

Rohan Devaki
sumber
Terima kasih atas jawaban Anda. Silakan periksa jawaban lain pertama kali, karena ini tidak menambahkan sesuatu yang baru.
BluE
Pak saya menjawab pertanyaan ini berdasarkan pengetahuan yang saya tahu, mengapa saya melihat jawaban lain dan memposting jawaban saya, apakah Anda memposting komentar ini kepada semua orang yang menjawab ini. Ini sangat memalukan.
Rohan Devaki