Hôm nay, chúng ta Tìm hiểu Display Inline-Block là gì trong CSS năm 2022.Có bao giờ bạn câu hỏi thắc mắc vì sao thẻ p lại có chiều rộng là 100%, hay thẻ div, thẻ header, footer đều có chiều rộng là 100%. tuy nhiên trái ngược với các thẻ span, a, strong… Thì nó có chiều rộng phụ thuộc vào nội dung bên trong của thẻ, không những thế mà nó cũng không thể sử dụng được hai thuộc tính margin [top và bottom].
Các giá trị của Display Inline-Block là gì?
Giá trị display: inline
Inline là cách hiển thị trên một hàng và chiều rộng của thẻ đó sẽ dựa vào nội dung bên trong của thẻ, vì vậy nhiều thẻ có khả năng nằm ở trên cùng một hàng. tuy vậy inline không thể sử dụng được các thuộc tính width, height và top-bottom margin. Các thẻ HTML được hiển thị mặc định inline là
span.a {
display: inline; /* mặc định với span, a, strong, b, i… */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: #DB7093;
}
span.a {
display: inline; /* mặc định với span, a, strong, b, i… */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: #DB7093;
}Thuộc tính Display
display: inline
Bạn có thể trở thành một phần của atpweb.vn bằng cách gửi bài viết,
trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã hội
thông qua địa chỉ emailinfo@meta.vn
info@meta.com.vn hoặc đăng ký tài khoản và đăng bài
trực tiếp trên Quantrimang.com.
Giá trị display: block
Block là cách hiển thị luôn khởi đầu bằng một dòng mới và có chiều rộng bằng 100% chiều rộng Web. bởi vậy khi mà bạn vận dụng thẻ này thì mặc dù thông tin ngắn tuy nhiên 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 tính chất width và height. Các thẻ HTML hiển thị mặc đinh block là:
span.b {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: #DB7093;
}
span.a {
display: inline; /* mặc định với span, a, strong, b, i… */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: #DB7093;
}Thuộc tính Display
display: inline
Bạn có thể trở thành một phần của atpweb.vn bằng cách gửi bài viết,
trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã hội
thông qua địa chỉ emailinfo@meta.vn
info@meta.com.vn hoặc đăng ký tài khoản và đăng bài
trực tiếp trên Quantrimang.com.
Giá trị display: inline-block
Inline-block là cách hiển thị kết hợp cả hai cách trên, chuyển phần tử về hiển thị trên cùng một hàng nhưng nó vẫn thừa hưởng các đặc tính của block.
span.c {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: #DB7093;
}
span.c {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: #DB7093;
}Thuộc tính Display
display: inline-block
Cập nhật những xu hướng,khám phá,
nghiên cứu mới nhất về khoa học công nghệ.
So với display: inline, cách hiển thị inline-block có khả năng dùng được các thuộc tính width, height và top-bottom margin.
So với display: block, cách hiển thị inline-block không làm ngắt dòng một khi kết thúc thẻ, vì vậy các thẻ có thế được đặt nằm cạnh nhau
Sử dụng inline-block để tạo liên kết điều hướng
Display: inline-block được vận dụng chủ yếu cho việc hiển thị danh sách điều hướng theo chiều ngang:
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}Website Quản trị mạng
Bạn có thể trở thành một phần của atpweb.vn bằng cách gửi bài viết,
trải nghiệm công nghệ của mình về cho đội ngũ quản lý nội dung của mạng xã
hội thông qua địa chỉ email info@meta.vn hoặc đăng ký tài khoản và đăng bài
trực tiếp trên Quantrimang.com.
[Nguồn: Tổng hợp]
Lời tổng kết
Qua bài viết trên của ATP Web đã cung cấp đến các bạn đọc một số thông tin về hữu ích. Hy vọng những thông tin trên của bài viết sẽ hữu ích với các bạn đọc. Cảm ơn các bạn đã dành nhiều thời gian để xem qua bài viết này nhé.