Các phần tử cấp nội tuyến có thuộc tính hiển thị CSS được đặt thành ‘nội dòng,‘ bảng nội tuyến ’hoặc‘ khối nội tuyến ’và các phần tử này không buộc ngắt dòng ở trên và dưới. Các hộp cấp nội tuyến được tạo bởi mỗi phần tử cấp nội tuyến, là một phần của sơ đồ định vị cũng như chứa các hộp con.
Hộp nội tuyến là hộp có nội dung của chúng tuân theo ngữ cảnh định dạng nội tuyến. Các hộp nội tuyến được chia thành một số hộp nội tuyến trong khi những hộp nội tuyến không bao giờ được phân chia được gọi là hộp cấp nội tuyến nguyên tử.
Hộp nội tuyến ẩn danh là những hộp mà nhà phát triển không có quyền kiểm soát. Nếu một hộp khối chứa một số văn bản trống và các hộp cấp nội tuyến khác, thì văn bản trống xung quanh các hộp cấp nội tuyến tuân theo ngữ cảnh định dạng nội tuyến và được bao bọc trong các hộp nội tuyến ẩn danh.
Ví dụ
Hãy xem một ví dụ về Phần tử cấp nội tuyến và Hộp nội tuyến -
<!DOCTYPE html>
<html>
<head>
<title>CSS Inline-level Elements and Inline Boxes</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
}
input[type="button"] {
border-radius: 10px;
}
.child{
color: white;
border: 4px solid black;
}
.child:nth-of-type(1){
background-color: #FF8A00;
}
.child:nth-of-type(2){
background-color: #F44336;
}
.child:nth-of-type(3){
background-color: #C303C3;
}
.child:nth-of-type(4){
background-color: #4CAF50;
}
.child:nth-of-type(5){
background-color: #03A9F4;
}
.child:nth-of-type(6){
background-color: #FEDC11;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS Inline-level Elements and Inline Boxes</legend>
<div><span class="child">Orange</span> Color<span class="child">Red</span> Color<span class="child">Violet</span> Color</div><br>
</body>
</html> Đầu ra
Điều này sẽ tạo ra kết quả sau -
