องค์ประกอบระดับอินไลน์มีคุณสมบัติการแสดง CSS ที่ตั้งค่าเป็น 'inline, 'inline-table' หรือ 'inline-block' และองค์ประกอบเหล่านี้ไม่ได้บังคับให้เส้นแบ่งด้านบนและด้านล่างตัวเอง กล่องระดับอินไลน์ถูกสร้างขึ้นโดยแต่ละองค์ประกอบระดับอินไลน์ซึ่งเป็นส่วนหนึ่งของรูปแบบการจัดตำแหน่งและประกอบด้วยกล่องย่อย
กล่องอินไลน์คือกล่องที่มีเนื้อหาตามบริบทการจัดรูปแบบอินไลน์ กล่องอินไลน์จะถูกแบ่งออกเป็นกล่องอินไลน์จำนวนหนึ่ง ในขณะที่กล่องอินไลน์ที่ไม่ถูกแยกออกมาจะเรียกว่ากล่องระดับอะตอมแบบอินไลน์
กล่องอินไลน์ที่ไม่ระบุชื่อคือกล่องที่ผู้พัฒนาไม่มีการควบคุม หากกล่องบล็อกมีข้อความเปล่าและกล่องระดับอินไลน์อื่นๆ ข้อความเปล่ารอบๆ กล่องระดับอินไลน์จะเป็นไปตามบริบทการจัดรูปแบบอินไลน์และถูกปิดล้อมในกล่องอินไลน์ที่ไม่ระบุชื่อ
ตัวอย่าง
มาดูตัวอย่างสำหรับ Inline-level Elements และ Inline Boxes −
<!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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
