Khi chúng ta viết HTML và CSS thì mấy thuật ngữ như block, inline và inline-block có thể gây bối rối, nhưng chúng lại rất quan trọng nếu bạn muốn căn chỉnh bố cục trang!
Lơ tơ mơ về mấy thứ căn bản này sẽ làm chúng ta cảm thấy cực kỳ vất vả khi muốn các vị trí trên trang đặt đúng nơi mình muốn. Hoặc ngay cả khi đặt được đúng vị trí rồi, có thể bạn vẫn lăn tăn không ổn, vì không hiểu rõ mình vừa làm điều gì.
Bên dưới đây chúng ta sẽ xem các ví dụ về từng thuộc tính để có thể hiểu rõ hơn cách làm việc của chúng.
CSS display: inline
Tôi sẽ sử dụng thẻ span để làm ví dụ, thẻ này có thuộc tính display mặc định là inline rồi nên chúng ta không phải viết CSS chuyển display cho nó, chỉ cần viết, rồi bật lên thông qua trình duyệt xem có điều gì xảy ra hay không? Để dễ nhìn hơn, tôi thêm màu đỏ cho văn bản được bao quanh thẻ span:
<!DOCTYPE html>
<html>
<head>
<title>inline trong CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
span {color:red; }
</style>
</head>
<body>
Xin chào các bạn, chúc các bạn một ngày học vui vẻ, <span>tôi là thẻ span đây</span>. Tôi vẫn tự nghĩ bản thân mình khác biệt. Mặc dù tôi không có tính năng gì đặc biệt.
</body>
</html>Kết quả: không có điều gì đặc biệt xảy ra ở đây!
CSS display: block
Giờ tôi sẽ chuyển display của span thành block, mã mẫu:
<!DOCTYPE html>
<html>
<head>
<title>block trong CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
span {color:red; display:block;}
</style>
</head>
<body>
Xin chào các bạn, chúc các bạn một ngày học vui vẻ, <span>tôi là thẻ span đây</span>. Tôi vẫn tự nghĩ bản thân mình khác biệt. Mặc dù tôi không có tính năng gì đặc biệt.
</body>
</html>Kết quả: giờ thì chúng ta thấy khác biệt rồi. Văn bản được bao quanh thẻ span đã chiếm một dòng riêng nó. Sở dĩ có điều này vì display block làm cho phần tử sở hữu dòng riêng chứ không nằm cùng dòng như inline. Điều này cũng tương tự thẻ như thẻ p, h1 tới h6 và li (ol, ul), chúng cũng chiếm dòng riêng.
CSS display: inline-block
Bây giờ tới phần cuối, khi span chuyển thành inline-block. Mã:
<!DOCTYPE html>
<html>
<head>
<title>inline-block trong CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
span {color:red; display:inline-block;}
</style>
</head>
<body>
Xin chào các bạn, chúc các bạn một ngày học vui vẻ, <span>tôi là thẻ span đây</span>. Tôi vẫn tự nghĩ bản thân mình khác biệt. Mặc dù tôi không có tính năng gì đặc biệt.
</body>
</html>Kết quả: rất giống với inline, đoạn văn bản nằm cùng dòng. Nhưng sự khác biệt bạn sẽ sớm biết.
Giờ bạn thử thêm margin cho span có inline-block xem tình hình gì xảy ra. Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>inline-block trong CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
span {color:red; display:inline-block; margin:30px; }
</style>
</head>
<body>
Xin chào các bạn, chúc các bạn một ngày học vui vẻ, <span>tôi là thẻ span đây</span>. Tôi vẫn tự nghĩ bản thân mình khác biệt. Mặc dù tôi không có tính năng gì đặc biệt.
</body>
</html>Hệt như vậy (tức vẫn để margin là 30px), nhưng giờ bạn thử để span là inline thôi xem sao, mã mẫu:
<!DOCTYPE html>
<html>
<head>
<title>inline trong CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
span {color:red; margin:30px; }
</style>
</head>
<body>
Xin chào các bạn, chúc các bạn một ngày học vui vẻ, <span>tôi là thẻ span đây</span>. Tôi vẫn tự nghĩ bản thân mình khác biệt. Mặc dù tôi không có tính năng gì đặc biệt.
</body>
</html>Kết quả khác biệt ở chỗ margin top và bottom. Khi display là inline-block thẻ có margin theo đủ bốn hướng (left, right, top, bottom), còn khi là inline, thẻ chỉ có margin theo hai hướng là left và right.
Bạn sẽ thấy sự khác biệt rõ nét hơn nữa khi gắn thêm chiều rộng, chiều cao, và màu nền cho thẻ span với 2 thuộc tính khác nhau này. Ví dụ với inline, không đem lại bất kỳ thay đổi nào:
<!DOCTYPE html>
<html>
<head>
<title>inline trong CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
span {color:red; margin:30px; background-color: yellow; width:200px; height:200px;}
</style>
</head>
<body>
Xin chào các bạn, chúc các bạn một ngày học vui vẻ, <span>tôi là thẻ span đây</span>. Tôi vẫn tự nghĩ bản thân mình khác biệt. Mặc dù tôi không có tính năng gì đặc biệt.
</body>
</html>Còn inline-block tạo thành khối (block của riêng nó) dù nó vẫn nằm chung dòng cùng với các văn bản khác:
<!DOCTYPE html>
<html>
<head>
<title>inline-block trong CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
span {color:red; margin:30px; display:inline-block; background-color:yellow; width:200px; height:200px;}
</style>
</head>
<body>
Xin chào các bạn, chúc các bạn một ngày học vui vẻ, <span>tôi là thẻ span đây</span>. Tôi vẫn tự nghĩ bản thân mình khác biệt. Mặc dù tôi không có tính năng gì đặc biệt.
</body>
</html>Giờ chúng ta cũng làm vậy nhưng ốp vào thuộc tính block xem sao:
<!DOCTYPE html>
<html>
<head>
<title>With trong CSS</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
span {color:red; margin:30px; display:block; background-color:yellow; width:200px; height:200px;}
</style>
</head>
<body>
Xin chào các bạn, chúc các bạn một ngày học vui vẻ, <span>tôi là thẻ span đây</span>. Tôi vẫn tự nghĩ bản thân mình khác biệt. Mặc dù tôi không có tính năng gì đặc biệt.
</body>
</html>Kết quả: span lúc này như vùng tự trị tách riêng hẳn dòng của nó, với khối có kích cỡ, màu và lề như chỉ định.
Kết luận
- Thuộc tính
blocklàm cho thẻ có tính năng tự trị dù có có đang thuộc về một thẻ khác; - Thuộc tính
inlinelàm cho thẻ lệ thuộc vào dòng của nó, không có tính năng như box (hộp), không thể thiết lập được chiều cao, rộng, không có margin top, bottom, không có padding top (nhưng có padding bottom, cũng hơi lạ); - Thuộc tính
inline-blocklai giữa inline và block, nó có thuộc tính hộp, nhưng vẫn phải nằm cùng dòng với các phần tử mà nó đã “inline”;