CSS लेआउट - डिस्प्ले: इनलाइन-ब्लॉक
डिस्प्ले: इनलाइन-ब्लॉक वैल्यू
की तुलना में display: inline, मुख्य अंतर यह है कि display: inline-blockतत्व पर चौड़ाई और ऊंचाई निर्धारित करने की अनुमति मिलती है।
साथ ही, साथ
display: inline-blockमें, ऊपर और नीचे के मार्जिन/पैडिंग का सम्मान किया जाता है, लेकिन साथ display: inlineमें नहीं।
की तुलना में display: block, मुख्य अंतर यह है कि display: inline-blockतत्व के बाद लाइन-ब्रेक नहीं जोड़ता है, इसलिए तत्व अन्य तत्वों के बगल में बैठ सकता है।
display: inlineनिम्न उदाहरण , display: inline-block
और के भिन्न व्यवहार को दर्शाता है display: block:
उदाहरण
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display:
inline-block;
width: 100px;
height:
100px;
padding: 5px;
border: 1px
solid blue;
background-color: yellow;
}
span.c {
display: block;
width:
100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
नेविगेशन लिंक बनाने के लिए इनलाइन-ब्लॉक का उपयोग करना
के लिए एक सामान्य उपयोग display: inline-block
सूची आइटम को लंबवत के बजाय क्षैतिज रूप से प्रदर्शित करना है। निम्न उदाहरण क्षैतिज नेविगेशन लिंक बनाता है:
उदाहरण
.nav {
background-color: yellow;
list-style-type: none;
text-align:
center;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding:
20px;
}