पैराग्राफ (एक्स) एचटीएमएल, सीएसएस

Question

के बीच एक जगह बनाएं मुझे अपने <p>content</p> टैग के बीच स्थान चाहिए। <p> टैग के बाद पहले और नहीं। एफएक्स मेरा कोड है:

<div> 
    <h1>A headline</h1> 
    <p>Some text</p> 
    <p>Some text</p> 
</div> 
Something 

मुझे एच 1 और पी के बीच की जगह नहीं चाहिए जो एच 1 पर शून्य मार्जिन के साथ किया जाता है। लेकिन मैं पिछले <p> टैग के बाद अंतरिक्ष नहीं चाहता हूं। क्या यह संभव है: आखिरी बच्चा या कुछ जेएस/jQuery?

मैं अंतिम टैग पर कक्षा = "आखिरी" सेट नहीं कर सकता क्योंकि यह एक सीएमएस सिस्टम है।

Answer 1

p + p { 
    margin-top: 1.5em; 
} 

Answer 2

<div> 
    <h1>A headline</h1> 
    <p>Some text</p> 
    <div class="paragraph-space"></div> 
    <p>Some text</p> 
</div> 

?

Answer 3

पी के लिए एक डिफ़ॉल्ट नीचे-मार्जिन सेट करें, फिर अंतिम टैग को बिना किसी मार्जिन वाले कक्षा को दें।

Answer 4

<div> 
    <h1>A headline</h1> 
    <p>Some text</p> 
    <p style="margin-bottom: 0;">Some text</p> 
</div> 

Answer 5

आप IE6 का समर्थन करने के लिए आवश्यक नहीं कर रहे हैं आप उपयोग कर सकते हैं (हालांकि यह IE6 से बेहतर सीएसएस के लिए समर्थन के साथ एक ब्राउज़र की आवश्यकता है):

div, h1, p { margin: 0; } 
p + p { margin-top: 12px; } 

आप तो आईई 6 का समर्थन करने की आवश्यकता है, यह एक गंदे हैक है लेकिन यह जावास्क्रिप्ट के बिना काम करता है:

div, h1, p { margin: 0; } 
h1 { margin-bottom: -12px; } 
p { margin-top: 12px; } 

इस विधि का नुकसान यह है कि आप संतुलन मार्जिन के लिए 1em का उपयोग नहीं कर सकते हैं क्योंकि उनके पास अलग-अलग फ़ॉन्ट आकार हैं। आप मैन्युअल रूप से आवश्यकतानुसार समायोजित कर सकते हैं या पिक्सेल चौड़ाई का उपयोग कर सकते हैं।

Answer 6

आप इसे और अधिक ब्राउज़र संगत बनाना चाहते हैं, तो आप भी इस्तेमाल कर सकते हैं:

p { margin-top: 24px; } 
h1 { margin-bottom: -24px; } // play with this value as necessary 

नकारात्मक मार्जिन उनके प्रति तत्व खींच लेंगे। यह मुझे पसंद से गड़बड़ है, लेकिन जब आप कक्षाओं को जोड़ने के लिए सीएमएस उत्पन्न कोड की दया पर हैं, तो आपको रचनात्मक होना होगा।