So sánh giữa block và inline năm 2024
|
display inline-block là gì? Thực tế, display inline-block trong CSS được sử dụng rất phổ biến nhưng không phải người dùng nào cũng biết rõ về nó. Hãy cùng Quantrimang.com tìm hiểu nhé! Show CSS được sử dụng rất nhiều trong lập trình. Muốn dùng CSS thành thạo, bạn cần nắm được các thuộc tính của nó. Ở bài viết này, hãy cùng nhau học về display. Thuộc tính display trong CSS rất hữu ích và được sử dụng rộng rãi bởi nó chứa nhiều giá trị. Thuộc tính display xác định cách một thành phần HTML được hiển thị trên trang web. Thuộc tính này cũng chỉ định kiểu hộp đã dùng cho một phần tử HTML và cách nó được đặt trên trang. Nếu cần hiện những phần tử dưới dạng phần tử nội tuyến, hoặc container khối cấp nội tuyến, thì thuộc tính display: inline và display: inline-block sẽ được triển khai. Ở bài viết này, chúng ta sẽ tìm hiểu chi tiết về thuộc tính display trong CSS, cùng với 2 giá trị thuộc tính khác nhau cho thành phần hiển thị, ví dụ display:inline và display:inline-block, cùng một số thuộc tính phổ biến khác. Sau bài viết, bạn sẽ nắm được kiến thức cơ bản về chúng, sự khác biệt và cả cách dùng qua ví dụ minh họa cụ thể. Trong CSS, thuộc tính display quyết định cách một phần tử trông như thế nào. Nó cũng đóng vai trò quan trọng trong cách trình bày code HTML của bạn vì nó có ảnh hưởng đáng kể tới bố cục. Có thể nhận thấy rằng, một số thẻ HTML như , ,
Ở ví dụ này, thuộc tính width và height không sử dụng được, các thẻ span nằm cùng một dòng cạnh nhau, một số thuộc tính áp dụng gây ảnh hưởng đến nội dung ở các dòng khác. Giá trị display: blockBlock là cách hiển thị luôn bắt đầu bằng một dòng mới và có chiều rộng bằng 100% chiều rộng trang web. Vì vậy khi bạn dùng thẻ này thì mặc dù nội dung ngắn nhưng các thẻ khác ở phía dưới vẫn được nằm ở một dòng khác tách biệt. Khác biệt của thẻ này là dùng được thuộc tính width và height. Các thẻ HTML hiển thị mặc đinh block là: ,
, đến |
