CSS Inline, Block và Inline-Block

truongtuongtu bắt đầu chủ đề từ 5 năm trước

Chúng ta đã biết với CSS mỗi phần tử sẽ được hiển thị theo 3 kiểu là Inline, Block và Inline-Block. Nếu các bạn vẫn chưa nắm rõ về 3 kiểu hiển thị này hãy theo dõi bài này nhé

Chúng ta xét ví dụ đoạn mã HTML sau

<html>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<style>
.span1 {
    border-style: dotted;border-color:magenta;
}
.inline {
    display: inline;
    width: 100px;
    height: 100px;
}
.block {
    display: block;
    width: 100px;
    height: 100px;
}
.inline-block {
    display: inline-block;
    width: 100px;
    height: 100px;
}
</style>
<body>
    <p>Đoạn văn <span class="inline span1">inline </span> trong trang</p>
    <p>Đoạn văn <span class="block span1">block</span> trong trang</p>
    <p>Đoạn văn <span class="inline-block span1">inline-block</span> trong trang</p>
</body>
</html>

Kết quả hiển thị :

Đoạn văn inline trong trang

Đoạn văn block trong trang

Đoạn văn inline-block trong trang

Hiển Thị Theo Kiểu Inline

Phần tử span có tên lớp là .inline được hiển thị theo kiểu inline và với kiểu này thì phần tử sẽ nằm cùng hàng với các phần tử cạnh nó và nó không có 2 thuộc tính CSS là width (chiều dài) và height (chiều cao) mà ngược lại chiều dài và chiều cao của phần tử sẽ được gán giá trị cố định đúng bằng với kích thước của nội dung (văn bản) có bên trong phần tử.

Việc bạn định nghĩa giá trị cho hai thuộc tính width và height của phần tử sẽ không có tác dụng

Hiển Thị Theo Kiểu Block

BVới kiểu Block thì phần tử sẽ được hiển thị theo một khối (chiếm chọn một hàng) và có các thuộc tính CSS là width và height để chúng ta có thể tuỳ biến giá trị. Giá trị mặc định của 2 thuộc tính trên cho phần tử kiểu block là 100%. Có nghĩa là chúng sẽ có kích thước chiều ngang và chiều dọc bằng với kích thước của phần tử mẹ chứa chúng.

Trường hợp nếu bạn không đặt giá trị cho hai thuộc tính trên thì phần tử này sẽ có bề dài và bề ngang bằng với bề dài và bề ngang của phần tử p chứa nó

Ví dụ:

Đoạn văn inline trong trang

Đoạn văn block trong trang

Đoạn văn inline-block trong trang

Hiển Thị Theo Kiểu Inline-Block

Kiểu Inline-Block là sự hoà hợp giữa kiểu Inline và kiểu Block. Với Inline-Block, phần tử sẽ có hai phần tử width và height giống như phần tử hiển thị kiểu Blog, tuy nhiên không giống với Block ở chỗ Inline-Block lại có thể nằm cùng hàng với các phần tử xung quanh nó (tương tự với kiểu Inline). Chỉ khi bạn đặt giá trị cho 2 thuộc tính width và height là 100% thì kiểu hiển thị này sẽ trở thành giống với kiểu hiển thị block.

Preview

Viết câu trả lời

0 Bình luận

bắt đầu chủ đề từ ·

@ ·