खाली तत्व के लिए पैडिंग निकालें

Question

मैं आगामी पोर्टल साइट के लिए एक पृष्ठ उत्पन्न कर रहा हूं, और मुझे कुछ वैकल्पिक सामग्री के साथ एक HTML तत्व मिला है। मैं तत्व को खाली होने पर प्रस्तुत नहीं करना चाहता हूं, लेकिन इसमें कुछ पैडिंग जोड़ने से इसे प्रस्तुत करना पड़ता है। मैं सामग्री में पैडिंग कैसे जोड़ूं, लेकिन केवल तभी सामग्री मौजूद है?

प्रश्न में

.someElement{padding-top: 5px;} 

HTML:

<div class="someElement">With padded content</div> 
<div class="someElement"><!-- shouldn't render since it has no content --></div> 

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

Answer 1

आप CSS3 के pesudo-वर्ग के साथ चाल कर सकते हैं: खाली

.someElement 
{ 
    // your standard style 
} 
.someElement:empty 
{ 
    display:none; 
} 

दुर्भाग्य से इंटरनेट एक्सप्लोरर अभी तक कि feauture समर्थन नहीं करता। अन्य सभी ब्राउज़रों के लिए यह ठीक होगा ...

Answer 2

मैं ऐसा करने के लिए केवल एक सीएसएस के बारे में नहीं सोच सकता।

मैं यह तय करने का प्रयास करूंगा कि उस समय तत्व प्रदान किया गया है जब मुझे पता है कि इसमें कोई सामग्री होगी या नहीं। यह शायद सबसे साफ समाधान है।

Answer 3

यदि यह आवश्यक एचटीएमएल, में करने के लिए कहा कि सामग्री गद्दी संपत्ति

.someElement > div{padding-top:5px;} 

<div class="someElement"><div>Content</div></div> 

अन्यथा है कि चारों ओर एक अतिरिक्त div जोड़ने के लिए होगा सबसे अच्छा सीएसएस/HTML रास्ता div.someElement के लिए है , जैसा कि पेक्का कहते हैं, या जावास्क्रिप्ट को आपके लिए यह करने पर एक नज़र डालें।

Answer 4

बिंदु है जहां आप वैकल्पिक div पॉप्युलेट, उस में डाल करने के लिए कोई पाठ नहीं है अगर में, this source (और अन्य) के अनुसार none. लिए सीएसएस display संपत्ति बदलने का प्रयास करें display: none दस्तावेज़ से पूरी तरह से तत्व निकाल देता है। यह किसी भी स्थान पर नहीं लेता है, भले ही इसके लिए एचटीएमएल अभी भी स्रोत कोड में है।

Answer 5

तत्व को id विशेषता दें। पृष्ठ लोड हो जाने के बाद आप जावास्क्रिप्ट का उपयोग अपनी आंतरिक HTML संपत्ति को जांचने के लिए कर सकते हैं। यदि आंतरिक HTML की लंबाई शून्य है, तो आप इसकी प्रदर्शन संपत्ति को किसी भी पर सेट कर सकते हैं। This page मदद कर सकता है अगर आपको अपना जावास्क्रिप्ट नहीं पता है।

यह अभी भी खेलने का एक मजेदार तरीका है। यदि आपको पता है कि पृष्ठ की सेवा करने से पहले तत्व को प्रस्तुत नहीं किया जाना चाहिए तो इसे पूरी तरह से छोड़ना बेहतर होगा। यदि आप तत्व को छोड़ना नहीं चाहते हैं, तो बस इसे छुपाएं, फिर इसे छिपाने में मजबूर करें; style="display: none"

Answer 6

खाली तत्व को एक अलग वर्ग दें (someHiddenElement कहें) जब आप सामग्री उत्पन्न कर रहे हों। फिर अपनी स्टाइल शीट में someHiddenElement { display: none } जोड़ें।

Answer 7

<style> 
.someElement{padding-top: 5px; display:table;} 
</style> 
<div class="someElement">With padded content</div> 
<div class="someElement"><!-- shouldn't render since it has no content --></div> 

प्रदर्शन जोड़ना: तालिका; चाल करना चाहिए

Answer 8

कंटेनर पर पैडिंग का उपयोग न करें, सामग्री पर मार्जिन का उपयोग करें। जब कोई सामग्री नहीं है, तो कंटेनर अदृश्य रहता है।