Thẻ block và inline trong html

Khi chúng ta viết HTML và CSS thì mấy thuật ngữ như block, inline và

    
        
        
        
            
    
    
            Xin chào các bạn, chúc các bạn một ngày học vui vẻ, tôi là thẻ span đây. 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.
    

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

---

Mục lục

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:

    
        
        
        
            
    
    
            Xin chào các bạn, chúc các bạn một ngày học vui vẻ, tôi là thẻ span đây. 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.
    

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:

    
        
        
        
            
    
    
            Xin chào các bạn, chúc các bạn một ngày học vui vẻ, tôi là thẻ span đây. 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.
    

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ã:

    
        
        
        
            
    
    
            Xin chào các bạn, chúc các bạn một ngày học vui vẻ, tôi là thẻ span đây. 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.
    

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ụ:

    
        
        
        
            
    
    
            Xin chào các bạn, chúc các bạn một ngày học vui vẻ, tôi là thẻ span đây. 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.
    

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:

    
        
        
        
            
    
    
            Xin chào các bạn, chúc các bạn một ngày học vui vẻ, tôi là thẻ span đây. 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.
    

Kết quả khác biệt ở chỗ

    
        
        
        
            
    
    
            Xin chào các bạn, chúc các bạn một ngày học vui vẻ, tôi là thẻ span đây. 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.
    

3 và

    
        
        
        
            
    
    
            Xin chào các bạn, chúc các bạn một ngày học vui vẻ, tôi là thẻ span đây. 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.
    

4. Khi display là

    
        
        
        
            
    
    
            Xin chào các bạn, chúc các bạn một ngày học vui vẻ, tôi là thẻ span đây. 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.
    

0 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:

    
        
        
        
            
    
    
            Xin chào các bạn, chúc các bạn một ngày học vui vẻ, tôi là thẻ span đây. 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.
    

---

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:

    
        
        
        
            
    
    
            Xin chào các bạn, chúc các bạn một ngày học vui vẻ, tôi là thẻ span đây. 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.
    

---

Giờ chúng ta cũng làm vậy nhưng ốp vào thuộc tính block xem sao:

    
        
        
        
            
    
    
            Xin chào các bạn, chúc các bạn một ngày học vui vẻ, tôi là thẻ span đây. 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.
    

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.