इनलाइन-स्तरीय तत्वों में उनकी सीएसएस डिस्प्ले प्रॉपर्टी या तो 'इनलाइन,' इनलाइन-टेबल ', या 'इनलाइन-ब्लॉक' पर सेट होती है और ये तत्व स्वयं के ऊपर और नीचे लाइन ब्रेक को मजबूर नहीं करते हैं। इनलाइन-लेवल बॉक्स प्रत्येक इनलाइन-लेवल एलीमेंट द्वारा जेनरेट किए जाते हैं जो पोजीशनिंग स्कीम का एक हिस्सा होता है और साथ ही इसमें चाइल्ड बॉक्स भी होते हैं।
इनलाइन बॉक्स वे बॉक्स होते हैं जिनमें उनकी सामग्री इनलाइन स्वरूपण संदर्भ का पालन करती है। इनलाइन बॉक्स को कई इनलाइन बॉक्स में विभाजित किया जाता है, जबकि वे इनलाइन बॉक्स जो कभी विभाजित नहीं होते हैं उन्हें एटॉमिक इनलाइन-लेवल बॉक्स कहा जाता है।
बेनामी इनलाइन बॉक्स वे बॉक्स होते हैं जिन पर डेवलपर का कोई नियंत्रण नहीं होता है। यदि किसी ब्लॉक बॉक्स में कुछ बेयर टेक्स्ट और अन्य इनलाइन-लेवल बॉक्स होते हैं, तो इनलाइन-लेवल बॉक्स के आसपास का बेयर टेक्स्ट इनलाइन फॉर्मेटिंग संदर्भ का अनुसरण करता है और गुमनाम इनलाइन बॉक्स में संलग्न होता है।
उदाहरण
आइए इनलाइन-स्तरीय तत्वों और इनलाइन बॉक्स के लिए एक उदाहरण देखें -
<!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> आउटपुट
यह निम्नलिखित आउटपुट देगा -
