ब्लॉक तत्वों के बीच लंबवत अंतर जोड़ने के लिए, लेकिन शीर्ष और नीचे

Question

कहें कि मेरे पास पी, एलआई, या डीआईवी तत्वों का समूह है, उनके बीच कुछ भी नहीं है। मैं उनके बीच लंबवत रिक्ति को नियंत्रित करना चाहता हूं, इसलिए वे इतनी कसकर फिट नहीं होते हैं। लेकिन मैं किसी भी स्थान को ऊपर और नीचे नहीं जोड़ना चाहता, क्योंकि इसे मूल तत्व द्वारा नियंत्रित किया जाता है और मुझे और आवश्यकता नहीं है। क्या ऐसा करने का कोई आसान तरीका है जो सभी ब्लॉक तत्वों के लिए काम करता है? के बाद से div पहले से ही है,

p { 
    margin: 5px 0; 
    } 

और फिर

<div> 
    <p>1</p> 
    <p>2</p> 
    <p>3</p> 
    <p>4</p> 
</div> 

लेकिन मैं पी 1 से ऊपर 5px नहीं चाहते हैं, या पी 4 से नीचे:

कहो मैं कुछ इस तरह मिल गया है पैडिंग और मैं इसके साथ गड़बड़ नहीं करना चाहता। मैं बस पी 1 और पी 2, पी 2 और पी 3, आदि के बीच 10 पीएक्स चाहता हूं

मुझे यकीन है कि मैं कुछ कर सकता हूं (और मेरे पास कई बार), लेकिन मैं कुछ क्लीनर ढूंढ रहा हूं जो मैं नहीं करता इस सामान्य परिस्थिति के लिए बहुत विशेष आवरण नहीं करना है।

Answer 1

उपयोग आसन्न चयनकर्ताओं

p + p { margin-top: 10px; } 

असल में अवधारणा है कि, एक p के बीच में एक और p दे 10px मार्जिन के बाद आता है।

p, li, div { 
    margin-bottom: 10px; 
} 

p:last-child, li:last-child, div:last-child { 
    margin-bottom: none; 
} 

Answer 2

p, li, div { 
    margin-bottom: 10px; 
} 
#parentID { 
    margin-bottom: -10px; 
} 

Answer 3

को कुछ इसी तरह यह भी :last-child या :first-child

यहाँ एक उदाहरण उपयोग कर रहा है किया जा सकता है। आप इस तरह परिभाषित कर सकते हैं:

p + p{ 
margin-top:0; 
} 

या

p ~ p{ 
margin-top:0; 
} 

Answer 4

आप adjacent selector s का उपयोग कर सकते हैं:

आप उपयोग

p + p, li + li, div + div { 
    margin-top: 10px; 
} 

Answer 5

p { margin: 10px 0 0 0; } 
p:first-child { margin: 0; } 

है यही कारण है कि, सभी p तत्वों और शून्य करने के लिए अन्य मार्जिन के लिए 10px के एक शीर्ष मार्जिन सेट पहले p के अलावा तत्व, जिसके लिए आप शीर्ष मार्जिन को शून्य पर भी सेट करते हैं।

यह कई अन्य दृष्टिकोणों की तुलना में अधिक व्यापक रूप से काम करता है, जो प्रासंगिक चयनकर्ताओं का उपयोग करते हैं जो पुराने ब्राउज़र द्वारा समर्थित नहीं हैं। वास्तव में अधिकतम ब्राउज़र समर्थन प्राप्त करने के लिए, आप मार्कअप में पहले p तत्व को कक्षा निर्दिष्ट करेंगे और p:first-child के बजाय कक्षा चयनकर्ता का उपयोग करेंगे।

यह सबसे आसान तरीका है, क्योंकि सीएसएस तत्वों पर काम करता है, न कि तत्वों के बीच क्या है। तो आपको p तत्वों के अनुक्रम में पहले p तत्व को अलग करने के कुछ तरीके की आवश्यकता है।

ध्यान दें कि p { margin: 5px 0; } (प्रश्न में उल्लिखित) 5px के लंबवत मार्जिन बनाएगा, न कि 10px, क्योंकि आसन्न लंबवत मार्जिन पतन हो।