2013-10-03 17 views
7

नीचे दिए गए कोड में, मैं एच 1 तत्व को शीर्ष-मार्जिन प्राप्त करने की कोशिश कर रहा हूं। जब मैं सीएसएस में इनलाइन करने की स्थिति निर्धारित करता हूं, तो मार्जिन-टॉप दिखाई नहीं देता है। लेकिन जब मैं इसे इनलाइन-ब्लॉक में बदलता हूं, तो यह करता है। मैं सोच रहा हूं कि कोई यह समझा सकता है कि ऐसा क्यों है। धन्यवाद।इनलाइन-ब्लॉक के साथ मार्जिन-टॉप क्यों काम करता है लेकिन इनलाइन के साथ नहीं?

संपादित करें: यहाँ jsfiddle में कोड है:

<!DOCTYPE html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="MyFirstWebsite.css"> 
    <title> 
     Max Pleaner's First Website 
    </title> 
    </head> 
    <body> 
    <h1>Welcome to my site.</h1> 
    </body> 
</html> 

और यहाँ सीएसएस

body { 
    background-image:url('sharks.jpg'); 
    } 

h1 { 
    background-color:#1C0245; 
    display:inline; 
    padding: 6.5px 7.6px; 
    margin-left:100px; 
    margin-top:25px; 
} 

उत्तर

12

सीएसएस 2 विनिर्देश राज्यों के Section 9.2.4:

इनलाइन-ब्लॉक
यह मान एक तत्व एक इनलाइन स्तरीय ब्लॉक कंटेनर उत्पन्न करने के लिए कारण बनता है। इनलाइन-ब्लॉक के अंदर ब्लॉक बॉक्स के रूप में स्वरूपित किया गया है, और तत्व स्वयं को परमाणु इनलाइन-स्तर बॉक्स के रूप में स्वरूपित किया गया है।

इनलाइन
यह मान एक तत्व एक या अधिक इनलाइन बक्से उत्पन्न करने के लिए कारण बनता है।

इसके अलावा सीएसएस 2 विनिर्देश ( section 9.4.2) हमें बताया हो कि इनलाइन तत्वों केवल क्षैतिज मार्जिन ( proof) सम्मान में पर

:

एक इनलाइन स्वरूपण संदर्भ में, बक्से बाहर क्षैतिज एक के बाद रखी हैं, अन्य, एक ब्लॉक के शीर्ष पर शुरू होता है। क्षैतिज मार्जिन, सीमाओं, और पैडिंग इन बक्से के बीच सम्मानित हैं।

inline और inline-block के बीच अंतर यह है कि inline तत्वों इनलाइन रूप में माना जाता है, जबकि inline-block तत्वों को प्रभावी ढंग से ब्लॉक (जो एक दूसरे के साथ नेत्रहीन इनलाइन हैं) के रूप में इलाज कर रहे हैं।

ब्लॉक-स्तर तत्व दोनों क्षैतिज और लंबवत मार्जिन का सम्मान करते हैं जबकि इनलाइन-स्तर तत्व केवल क्षैतिज मार्जिन का सम्मान करते हैं।

1

केवल ब्लॉक स्तर तत्वों मार्जिन हो सकता है: http://jsfiddle.net/pjPdE/

यहाँ मेरी HTML है। इसे 'डिस्प्ले: इनलाइन; इनलाइन तत्व बनने के लिए इसे (असुरक्षित रूप से) बलों को मजबूर करता है, इस प्रकार यह मार्जिन खो देता है।

यदि आप इसे इनलाइन अन्य सामग्री के साथ रखना चाहते हैं और मार्जिन का लाभ उठाना चाहते हैं तो इनलाइन-ब्लॉक का उपयोग करने का प्रयास करें। । ।

5

<h1> टैग डिफ़ॉल्ट रूप से ब्लॉक तत्व है जो मार्जिन की अनुमति देता है। display: inline का उपयोग करके इसे एक इनलाइन तत्व में बदल दिया जाता है जैसे एक स्पैन टैग जो मार्जिन की अनुमति नहीं देता है।

display: inline-block का उपयोग करके आप दोनों तत्वों की दोनों सुविधाओं का उपयोग करने की अनुमति देता है।

एक तत्व को इनलाइन-स्तरीय ब्लॉक कंटेनर के रूप में प्रदर्शित करता है। के अंदर इस ब्लॉक ब्लॉक स्तर बॉक्स के रूप में स्वरूपित किया गया है, और तत्व में ही एक इनलाइन स्तर के बॉक्स

संदर्भ के रूप में स्वरूपित है: w3schools

+0

फ़्लोटिंग इससे मदद करता है। –

संबंधित मुद्दे