Mục lục

Tìm hiểu Display Inline-Block là gì trong CSS năm 2022

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

<head>
<style>
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;
}
</style>
</head>
<body>

<h1>Thuộc tính Display</h1>

<h2>display: inline</h2>
<div>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<span class=”a”>[email protected]</span>
<span class=”a”>[email protected]</span> hoặc đăng ký tài khoản và đăng bài
trực tiếp trên Quantrimang.com.</div>

</body>
</html>

Tìm hiểu Display Inline-Block là gì trong CSS
Tìm hiểu Display Inline-Block là gì trong CSS

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

<head>
<style>
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;
}
</style>
</head>
<body>

<h1>Thuộc tính Display</h1>

<h2>display: inline</h2>
<div>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<span class=”a”>[email protected]</span>
<span class=”a”>[email protected]</span> hoặc đăng ký tài khoản và đăng bài
trực tiếp trên Quantrimang.com.</div>

</body>
</html>

Tìm hiểu Display Inline-Block là gì trong CSS
Tìm hiểu Display Inline-Block là gì trong CSS

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

<!DOCTYPE html>
<html>
<head>
<style>
span.c {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: #DB7093;
}
</style>
</head>
<body>

<h1>Thuộc tính Display</h1>

<h2>display: inline-block</h2>
<div>Cập nhật những xu hướng,<span class=”c”>khám phá,</span>
<span class=”c”>nghiên cứu</span> mới nhất về khoa học công nghệ.</div>

</body>
</html>

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;
}
</style>
</head>
<body>

<h1>Website Quản trị mạng</h1>
<p>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 [email protected] hoặc đăng ký tài khoản và đăng bài
trực tiếp trên Quantrimang.com.</p>

<ul class=”nav”>
<li><a href=”#langcongnghe”>Làng công nghệ</a></li>
<li><a href=”#congnghe”>Công nghệ</a></li>
<li><a href=”#khoahoc”>Khoa học</a></li>
<li><a href=”#cuocsong”>Cuộc sống</a></li>
</ul>

</body>
</html>

Tìm hiểu Display Inline-Block là gì trong CSS
Tìm hiểu Display Inline-Block là gì trong CSS

(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é.

ATPWeb – XÂY DỰNG NGÔI NHÀ ONLINE

Đánh giá bài viết post

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

LIÊN HỆ TƯ VẤN

Thiết Kế Web
BLOG
Đăng ký tư vấn
Thiết kế website
Đồng hành cùng ATP WEB

Đăng ký tư vấn Thiết kế website