सीएसएस में मार्जिन-टॉप प्रतिशत गणना

किसी तत्व पर मार्जिन-टॉप प्रतिशत लागू करते समय, यह समझना आवश्यक है कि गणना कैसे की जाती है प्रदर्शन किया. आम धारणा के विपरीत, मार्जिन-टॉप प्रतिशत युक्त ब्लॉक की चौड़ाई के आधार पर निर्धारित किया जाता है, न कि उसकी ऊंचाई के आधार पर।

W3C विशिष्टता की व्याख्या:

के अनुसार W3C विनिर्देश, "प्रतिशत की गणना उत्पन्न बॉक्स के युक्त ब्लॉक की चौड़ाई के संबंध में की जाती है।" यह नियम 'मार्जिन-टॉप' और 'मार्जिन-बॉटम' दोनों पर लागू होता है। क्षैतिज और ऊर्ध्वाधर संगति:

एक ब्लॉक के सभी चार पक्षों के लिए प्रतिशत मार्जिन बराबर रहना चाहिए, जैसा कि 'मार्जिन' शॉर्टहैंड संपत्ति द्वारा परिभाषित किया गया है। कंटेनर की चौड़ाई पर ऊर्ध्वाधर मार्जिन को आधार बनाने से लगातार मार्जिन आकार बना रहता है। हालाँकि, यदि ये मार्जिन ब्लॉक ऊंचाई पर निर्भर करते हैं, तो लेआउट गणना के दौरान एक गोलाकार निर्भरता उत्पन्न होगी। कंटेनर की चौड़ाई पर लंबवत मार्जिन आधारित करने से यह समस्या हल हो जाती है।

उदाहरण:

1. निम्न कोड पर विचार करें:
2. .container चौड़ाई: 500px; ऊंचाई: 100px; } पी { मार्जिन-टॉप: 50%; }'पी' तत्व के लिए 50% के 'मार्जिन-टॉप' की गणना '.कंटेनर' की चौड़ाई के आधार पर की जाएगी, जो 500px है। इसलिए, लागू किया गया वास्तविक मार्जिन-टॉप 250px (500px का 50%) होगा। यह आम धारणा से भिन्न है कि यह 100px (200px का 50%, '.कंटेनर' की ऊंचाई) होगी।

निष्कर्ष:

यह समझकर कि मार्जिन कितना है -शीर्ष प्रतिशत की गणना की जाती है, आप तत्व स्थिति को प्रभावी ढंग से नियंत्रित कर सकते हैं और अप्रत्याशित लेआउट समस्याओं से बच सकते हैं। याद रखें कि सीएसएस लेआउट में लगातार आकार बनाए रखने और परिपत्र निर्भरता को रोकने के लिए लंबवत मार्जिन युक्त ब्लॉक की चौड़ाई पर आधारित होते हैं।