. Nếu bạn cho phần tử có chiều cao 100px và viền đỏ chẳng hạn, nó sẽ trông như thế này với
Hiển thị nội dòng
hiển thị: khối nội tuyến
hiển thị: khối
Mã: http://jsfiddle.net/Mta2b/
Các phần tử display:inline-blockgiống như display:inlinecác phần tử, nhưng chúng có thể có chiều rộng và chiều cao . Điều đó có nghĩa là bạn có thể sử dụng một phần tử khối nội tuyến như một khối trong khi chuyển nó trong văn bản hoặc các phần tử khác.
Bạn đang xem: Display inline-block là gì
Sự khác biệt của các kiểu được hỗ trợ như tóm tắt:
inline : chỉ margin-left, margin-right, padding-left,padding-rightinline-block : margin, padding, height,widthTrực giác tuyệt vời. Vì vậy, sự khác biệt duy nhất là thuộc tính chiều cao của các yếu tố nội tuyến không thể được đặt?
OscarCalderon: đồng thời, các phần tử nội tuyến không quan tâm đến lề & phần đệm dọc và phần tử tiếp theo sẽ được đặt ở cùng một dòng (không ngắt dòng sau nó). các phần tử khối như as p, divcó được một dòng toàn bộ chiều rộng (buộc ngắt dòng) nhưng tôn trọng chiều rộng / chiều cao và tất cả các phần đệm / lề ngang / dọc. Các phần tử khối nội tuyến có hành vi tương tự như khối nhưng không có ngắt dòng hoàn toàn (các phần tử khác có thể được đặt bên cạnh chúng)
padding-top và padding-right cũng ảnh hưởng đến hiệu ứng hiển thị của phần tử nội tuyến, gây ra một số mớ hỗn độn.
manuman94 Không, nó không có nghĩa như vậy. Có trường hợp sử dụng cho tất cả các loại màn hình khác nhau.
display: inline;là một chế độ hiển thị để sử dụng trong một câu. Chẳng hạn, nếu bạn có một đoạn văn và muốn làm nổi bật một từ bạn làm:
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Phần tử có một display: inline;mặc định, bởi vì thẻ này luôn được sử dụng trong một câu. Phần tử có một display: block;mặc định, bởi vì nó không phải là một câu hay trong một câu, nó là một khối các câu.
Một phần tử display: inline; không thể có heighta widthhoặc a dọc margin. Một phần tử có display: block; thể có một width, heightvà margin. Nếu bạn muốn thêm một heightđến yếu tố, bạn cần phải đặt yếu tố này để display: inline-block;. Bây giờ bạn có thể thêm một heightphần tử và mọi kiểu khối khác ( blockphần của inline-block), nhưng nó được đặt trong một câu ( inlinephần của inline-block).
Xem thêm: " In The Event That Là Gì ? In In The Event Nghĩa Là Gì
Câu trả lời chính xác! tl; dr - Nếu bạn muốn thay đổi kích thước các phần tử nội tuyến, bạn có thể sử dụng khối nội tuyến làm loại hiển thị.
Hiệu chỉnh nhỏ: các phần tử nội tuyến có thể có lề ngang (phải, trái), nhưng không phải lề dọc (trên, dưới)
Câu trả lời hay vì bạn đã đề cập về những gì chúng ta có thể / không thể làm khi chọn một trong các displaygiá trị.
Một điều không được đề cập trong câu trả lời là phần tử nội tuyến có thể ngắt giữa các dòng trong khi khối nội tuyến không thể (và rõ ràng là chặn)! Vì vậy, các phần tử nội tuyến có thể hữu ích để định kiểu các câu văn bản và các khối bên trong chúng, nhưng vì chúng không thể được đệm nên bạn có thể sử dụng chiều cao dòng thay thế.
style="width: 350px"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
style="display: inline; background: #F00; color: #FFF"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
style="width: 350px"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
style="display: inline-block; background: #F00; color: #FFF"> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
