CSS Inline-block
21/05/2019
Giá trị Display: inline-block
So với display: inline;, thì sự khác nhau chính là phần tử display: inline-block; có thể sử dụng với thuộc tính width và height.
Thêm nữa, Với display: inline-block; thì margin, padding top và bottom được công nhận. Còn display: inline; thì không.
So với display: block;, thì sự khác nhau chính là phần tử display: inline-block; phần nội dung sau nó không bị ngắt dòng, vì vậy nó có thể nằm cùng dòng với các phần tử khác.
Dưới đây là ví dụ cho 3 trường hợp display: inline , display: inline-block và display: block :
span.a {
display: inline; /* thuộc tính mặc định của span */
width: 100px; /* thuộc tính này không có tác dụng*/
height: 100px; /* thuộc tính này không có tác dụng*/
padding: 10px 5px; /* padding top và bottom không có tác dụng*/
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 10px 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 10px 5px;
border: 1px solid blue;
background-color: yellow;
}
Kết quả như sau:
Display: inline
Đoạn văn bản có nhiều dòng và nhiều chữ. Sử dụng thẻ <span> có display: inline; . Kết quả là thẻ span này không có width và height, padding top và bottom cũng không luôn. Khoảng cách giữa các dòng vẫn đều nhau.
Display: inline-block
Đoạn văn bản có nhiều dòng và nhiều chữ. Sử dụng thẻ <span> có display: inline-block; . Kết quả là thẻ span này có width và height là 100px và chữ phía sau nó vẫn nằm chung 1 hàng. Thêm nữa là nó cách đoạn văn bản ở trên và dưới 10px.
Display: block
Đoạn văn bản có nhiều dòng và nhiều chữ. Sử dụng thẻ <span> có display: block; . Kết quả là thẻ span này có width và height là 100px và chữ phía sau nó bị ngắt xuống thành 1 hàng mới.
Bài hướng dẫn về thuộc tính CSS Inline-block đã kết thúc rồi. Nếu có gì không hiểu thì các bạn hãy để lại bình luận bên dưới nhé.
