Thuộc tính display:block - Xuống dòng trong CSS

Để xuống dòng trong CSS bạn có thể dùng thuộc tính display, gán giá trị là block.

.class{
    display:block;
}

Trong HTML, những thẻ mà bạn gõ chữ xong mà nó xuống dòng luôn, gọi là thể block. Vì trong nội tại của nó đã có sẵn thuộc tính display block. Ví dụ như thẻ h1, h2, h3,…

Còn những thẻ không tự xuống dòng là những thẻ không có sẵn thuộc tính display block. Đó gọi là thẻ inline, nghĩa là trong một dòng. Ví dụ như span, a, b,… Nếu bạn muốn nó xuống dòng thì thêm thuộc tính display block vô trong CSS.

Giải thích cho thẻ margin và padding

Có những thẻ không có tác dụng với thuộc tính margin, ví dụ bạn đặt cho nó thuộc tính margin-top nhưng không thấy nó thay đổi gì cả.

Trong trường hợp này, thuộc tính display block sẽ giúp cho nó áp phê.

Ví dụ:

.span{
    margin-top:100px;
    display:block;
}

– Ở đây mình đang đặt thuộc tính cho thẻ span với mục đích muốn nó cách lề trên 100px.
– Nếu bạn chỉ ghi thuộc tính margin-top thì nó sẽ không tác dụng.
– Nhưng khi thêm display block vô thì margin top có tác dụng.

Ghi chú thêm

Ngược lại với thuộc tính display block là thuộc tính display inline, công dụng của nó là làm cho một thẻ xuống dòng trở thành không xuống dòng.

Author
Recent Posts

Trần Thành

Tôi là nhà sáng lập Kênh Tin Học - Một người luôn có niềm đam mê với mọi thứ liên quan đến công nghệ và đổi mới.

Thuộc tính display:block – Xuống dòng trong CSS

Giải thích cho thẻ margin và padding

Ghi chú thêm

2 thoughts on “Thuộc tính display:block – Xuống dòng trong CSS”

Leave a Comment Cancel reply