CSS Inline-block

21/05/2019

Bài sau » « Bài trước

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 widthheight.

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-blockdisplay: 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é.

Bài sau » « Bài trước
Back to top