Inline so với Inline-Block Display trong CSS
display: inline-block đã mang đến một cách mới để tạo các hộp cạnh nhau có thể thu gọn và bọc đúng cách tùy thuộc vào không gian có sẵn trong phần tử chứa. Nó làm cho các bố cục đã được thực hiện trước đó với các phao nổi dễ tạo hơn. Không cần phải xóa phao nữa.So với display: inline , sự khác biệt chính là inline-block cho phép cài đặt chiều rộng và chiều cao trên phần tử. Ngoài ra, với hiển thị: nội dòng , lề trên và dưới cùng & phần đệm không được tôn trọng, còn với display: inline-block thì không.
Bây giờ, sự khác biệt giữa display: inline-block và display: block là, với display: block , ngắt dòng xảy ra sau phần tử, vì vậy phần tử khối không nằm cạnh các phần tử khác. Dưới đây là một số ví dụ trực quan:
Hiển thị nội dòng
Lưu ý ở đây chiều rộng và chiều cao không được tôn trọng như thế nào cũng như cách hiển thị của phần đệm trên và dưới, nhưng chồng chéo lên các dòng trên và dưới.
span.box { display: inline; /* the default for span */ width: 100px; height: 160px; padding: 18px; }
Phô mai và rượu vang ricotta danish fontina. Brie pho mát cười toe toét paneer squirty pho mát storyggio bánh pho mát dê câu chuyệnggio dê câu chuyệnggio . Bavarian bergkase emmental fromage pho mát pho mát lát pho mát pho mát grin queso caerphilly.
display: inline-block
Ở đây chiều rộng, chiều cao và phần đệm được tôn trọng, nhưng hai bản sao của phần tử vẫn có thể nằm cạnh nhau.
span.box { display: inline-block; width: 100px; height: 160px; padding: 18px; }
Phô mai và rượu vang ricotta danish fontina. Brie pho mát cười toe toét paneer squirty pho mát storyggio bánh pho mát dê câu chuyệnggio dê câu chuyệnggio . Bavarian bergkase emmental fromage pho mát pho mát lát pho mát pho mát grin queso caerphilly.
hiển thị: khối
Ở đây mọi thứ đều được tôn trọng, nhưng các yếu tố không ngồi cạnh nhau.
span.box { display: block; width: 100px; height: 160px; padding: 18px; }
Phô mai và rượu vang ricotta danish fontina. Brie pho mát cười toe toét paneer squirty pho mát storyggio bánh pho mát dê câu chuyệnggio dê câu chuyệnggio . Bavarian bergkase emmental fromage pho mát pho mát lát pho mát pho mát grin queso caerphilly.
Các tin liên quan
image đường viền và đường viền Gradient trong CSS thuần túy2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03
Tùy chỉnh gạch chân với trang trí văn bản trong CSS
2020-09-03
Giải thích về đơn vị CSS
2020-09-03
Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS
2020-09-03
Thuộc tính khoảng trắng CSS
2020-09-03
Drop Caps trong CSS sử dụng chữ cái đầu tiên và chữ cái đầu
2020-09-03