मेरे div मार्जिन ओवरलैपिंग क्यों हैं और मैं इसे कैसे ठीक कर सकता हूं?

Question

मुझे समझ नहीं आ रहा है कि इन विभाजनों का मार्जिन अतिव्यापी क्यों है।

.alignright {float: right}
#header .social {margin-top: 50px;}
#header .social a {display: inline-block;}
#header .social .fb {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .social .twit {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;}
#header .contact span {color: #FFFFFF;}
#header .search {margin: 10px 0 0;}

<div class="alignright">
    <div class="social">
        <a href="#" class="twit"></a>
        <a href="#" class="fb"></a>
    </div><!-- social -->
    <div class="contact">
        Get in Touch: <span>[phone]</span>            
    </div><!-- contact -->
    <div class="search">
        <form method="post" action="">
            <input type="text" value="" name="s" gtbfieldid="28">
        </form>
    </div><!-- search -->
</div>

Comments

आप इस लेख को दिलचस्प संदर्भों के प्रारूप पर पा सकते हैं: tjkdesign.com/articles/…

— jensgram

आपको लगता है कि आपके द्वारा उपयोग किए जा रहे कुछ नियम गायब हैं। क्या सभी तत्व .alignright में भी तैर रहे हैं?

— जोएल ग्लोवियर

Answer 1

मुझे लगता है कि यह एक ढह गया मार्जिन है। पहले तत्व के नीचे और दूसरे के शीर्ष के बीच केवल सबसे बड़ा मार्जिन को ध्यान में रखा जाता है।

दो पैराग्राफ जैसे उदाहरणों के बीच बहुत अधिक स्थान नहीं होना काफी सामान्य है।

आप दो आसन्न तत्वों से नहीं बच सकते हैं ताकि आपको बड़े मार्जिन को बढ़ाना या कम करना पड़े।

संपादित करें: cf. डब्ल्यू 3 सी

दो मार्जिन समीप हैं यदि और केवल यदि:

• दोनों इन-ब्लॉक ब्लॉक-स्तरीय बॉक्स से संबंधित हैं जो समान ब्लॉक फॉर्मेटिंग संदर्भ में भाग लेते हैं
• कोई लाइन बॉक्स, कोई निकासी, कोई पैडिंग और कोई सीमा उन्हें अलग नहीं करती
• दोनों लंबवत-आसन्न बॉक्स किनारों से संबंधित हैं

इसलिए ऐसा कोई भी पतन नहीं है, floatजो तत्व को प्रवाह से बाहर ले जाए।

Comments

अपने मार्जिन को कम करें कि आप क्या चाहते हैं।

— Kissaki

संपादित, बस बड़े मार्जिन को बड़ा या कम करना या पैडिंग का उपयोग करना

— MatTheCat

बस पता चला है कि यदि आप तत्वों को तैरते हैं तो दोनों के लिए मार्जिन लागू होते हैं।

— आतिफ मोहम्मद अमीनुद्दीन

मैं floatएक हैक के रूप में उपयोग करने से सावधान रहूंगा, क्योंकि इसके कुछ दुष्प्रभाव हो सकते हैं। मैं floatएक नियम के रूप में उपयोग करने से सावधान हूं ।

— एंड्रयू

यदि आप एक घंटा एक ऊंचाई देते हैं तो यह फ्लो ब्लॉक स्तर के बॉक्स में बन जाता है? इसे आजमाएँ

— मैनुअल हर्नांडेज़

Answer 2

मार्जिन, पैडिंग के विपरीत (जो एक विशिष्ट चौड़ाई को पैड करता है) एक "न्यूनतम दूरी के रूप में ऐसा करें" है।

यह सभी तत्वों के लिए वह दूरी नहीं रखेगी।

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

Answer 3

यदि आप पैडिंग का उपयोग नहीं कर सकते हैं और वास्तव में मार्जिन के लिए ओवरलैप की आवश्यकता नहीं है, तो यहां एक चाल है:

.btn {
    /* hack for a 2px margin */
    border-top: 2px #fff solid;
    /* this is important if you have a background-color
    and don't want to see it underneath the transparent border*/
    background-clip: padding-box;
}

कृपया इस स्निपेट को डेमो के लिए लॉन्च करें:

div {
  margin: 10px;
  background: rgb(48, 158, 140);
  padding: 5px 15px;
  font-weight: bold;
  color: #fff;
}

.fake-margin {
  border-top: 10px solid transparent;
  background-clip: padding-box;
}

<div>Margin applied is 10px on each sides</div>
<div>the first two have only 10px between them</div>
<div class="fake-margin">the last two have 10 + 10px</div>
<div class="fake-margin">= 20 px</div>

Answer 4

display: flexमूल तत्व के लिए बाहर देखो ।

.flex {
  display: flex;
  flex-direction: column;
}

.block {
  display: block;
}


/* css for example only */
div {
  padding: 1em;
  background: #eee;
}
p {
  font-size: 20px;
  margin: 1em 0;
  background: pink;
  padding: 5px;
}
p:first-child {
  margin-top: 0;
}

<h1>display: flex</h1>
<div class="flex">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>
<h1>display: block</h1>
<div class="block">
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor.</p>
  <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
  <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
</div>

Answer 5

दो ऑब्जेक्ट्स के बीच एक स्पष्ट div टैग जोड़ें