Chương 3: CSS - Dự án
51. Block, Inline, and Inline-Block explained Hiểu rõ về Block, Inline và Inline-Block
Giảng viên: cc tuhocThời lượng: 11 phútThuộc khoá: HTML, CSS cơ bản dễ hiểu- Khóa học HTML, CSS từ Zero Tới Hero (291 bài · miễn phí)
Tự học lập trình web chưa bao giờ dễ dàng hơn với kênh tuhoc.cc! Trong bài học hôm nay, chúng ta sẽ khám phá thế giới phức tạp của "Block," "Inline," và "Inline-Block" trong lập trình web. Đây là những khái niệm cơ bản nhưng quan trọng mà bất kỳ ai muốn trở thành một nhà phát triển web giỏi cần phải nắm vững. 1. Block Elements: Block elements, hay còn gọi là "khối," thường chiếm hết chiều rộng của phần tử cha và bắt đầu từ một dòng mới. Điều này có nghĩa rằng các phần tử block không chia sẻ không gian chiều ngang với các phần tử khác và thường được sử dụng để tạo cấu trúc lớn của trang web như tiêu đề, đoạn văn bản, hoặc hình ảnh. 2. Inline Elements: Ngược lại, các phần tử "Inline" chiếm một phần của không gian chiều ngang và cho phép các phần tử khác nằm bên cạnh chúng trên cùng một dòng. Các ví dụ phổ biến của phần tử inline bao gồm các liên kết (a), văn bản in đậm (strong), và văn bản in nghiêng (em). 3. Inline-Block Elements: Phần tử "Inline-Block" là sự kết hợp giữa "Block" và "Inline." Chúng có thể chiếm không gian chiều ngang như các phần tử "Inline," nhưng cũng có thể chứa nội dung như các phần tử "Block." Điều này làm cho chúng trở thành lựa chọn tốt khi bạn muốn tạo một khung chứa linh hoạt, ví dụ như các nút chức năng trong một dòng văn bản. Trong video hôm nay, chúng tôi sẽ đi sâu vào từng loại phần tử này, cung cấp ví dụ cụ thể và hướng dẫn cách sử dụng chúng trong mã HTML và CSS. Bằng cách hiểu rõ về cách hoạt động của "Block," "Inline," và "Inline-Block," bạn sẽ có khả năng kiểm soát và thiết kế trang web của mình một cách hiệu quả hơn.