Display:inline và phần tử nội dòng (inline elements)
Phần tử dạng inline nằm trên cùng một dòng (cùng với phần tử khác), không có sự ngắt dòng mới
<b>, <a>, <strong>, <img>, <input>, <em> và đặc biệt là <span>…là những phần tử nội dòng.
Nội dung phần tử inline luôn xuất hiện bên trong phần tử khối.
Ví dụ:
<p>Doan nay khong co mau do<span style={font-color:red}>doan nay co mau do</span></p>
Hiển thị kết quả:
Doan nay khong co mau do doan nay co mau do
Nếu nội dung của phần tử nội dòng vượt quá độ dài của một dòng thì nó sẽ xuống dòng mới.
Display:inline
Đặc tính display chỉ kiểu hiển thị của phần tử.
Trong kiểu hiển thị display:inline thì:
+ Phần tử mang tính chất phần tử inline.
+ Không thiết lập được đặc tính width và height.
+ Không thiết lập được đặc tính margin-top và margin-bottom, nhưng vẫn thiết lập được đặc tính
margin-left và margin-right.
+ Thiết lập đầy đủ đặc tính padding.
Display:block và phần tử khối (block elements)
Phần tử dạng block tạo một khu vực hay khối (block), bắt đầu bằng một dòng mới, hay ngắt dòng.
<p>, <form>, <nav>, <ul>, <ol>, <li>, <h1> và đặc biệt là <div>… là những phần tử khối.
Phần tử khối có thể chứa nội dung, phần tử khối khác và phần tử inline.
Ví dụ:
<p>Mot doan van.</p>
<p>Mot doan van khac.</p>
Hiển thị kết quả:
Mot doan van.
Mot doan van khac.
Display:block
Trong kiểu hiển thị display:block thì:
+ Phần tử mang tính chất phần tử kiểu block.
+ Nếu không thiết lập width, bề ngang của block (khối) sẽ tự động mở rộng cho đến giới hạn của
phần tử chứa.
+ Có thể thiết lập margin và padding theo bốn hướng.
Display:inline-block
Kiểu hiển thị phần tử display:inline-block được xắp sếp bố cục giống với kiểu display:inline. có
nghĩa là phần tử và nội dung của nó nằm trên cùng một dòng (với phần tử khác). Tuy nhiên, phần tử
cũng có tính chất của display:block như thiết lập được width và height, thiết lập được margin,
padding đầy đủ theo bốn hướng.