क्यों एक div के साथ "प्रदर्शन: टेबल-सेल;" मार्जिन से प्रभावित नहीं?

Question

मेरे पास divएक दूसरे के साथ तत्व हैं display: table-cell;।

मैं marginउनके बीच सेट करना चाहता हूं, लेकिन margin: 5pxकोई असर नहीं हुआ। क्यों?

मेरा कोड:

<div style="display: table-cell; margin: 5px; background-color: red;">1</div>
<div style="display: table-cell; margin: 5px; background-color: green;">1</div>

Answer 1

कारण

से MDN दस्तावेजीकरण :

[मार्जिन प्रॉपर्टी] टेबल-कैप्शन, टेबल और इनलाइन-टेबल के अलावा टेबल डिस्प्ले प्रकार वाले तत्वों को छोड़कर सभी तत्वों पर लागू होती है

दूसरे शब्दों में, marginसंपत्ति तत्वों पर लागू नहीं होती है display:table-cell।

उपाय

border-spacingइसके बजाय संपत्ति का उपयोग करने पर विचार करें ।

ध्यान दें कि इसे एक display:tableलेआउट के साथ मूल तत्व पर लागू किया जाना चाहिए और border-collapse:separate।

उदाहरण के लिए:

एचटीएमएल

<div class="table">
    <div class="row">
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">879</div>
    </div>
</div>

सीएसएस

.table {display:table;border-collapse:separate;border-spacing:5px;}
.row {display:table-row;}
.cell {display:table-cell;padding:5px;border:1px solid black;}

JsFiddle डेमो देखें

---

अलग-अलग मार्जिन क्षैतिज और लंबवत

जैसा कि डिएगो क्विरो ने उल्लेख किया है, border-spacingसंपत्ति क्षैतिज और ऊर्ध्वाधर अक्षों के लिए एक अलग मार्जिन निर्धारित करने के लिए दो मूल्यों को भी स्वीकार करती है।

उदाहरण के लिए

.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */

Comments

धन्यवाद! क्षैतिज और ऊर्ध्वाधर स्थान के अलग-अलग सीमा-रिक्त होने की आवश्यकता के मामले में भी यह अंकन है: क्षैतिज ऊर्ध्वाधर;

— डिएगो Quirós

और मैंने सोचा कि मुझे एक बग मिला; मुझे पता है कि मुझे और सीएसएस सीखने की जरूरत है।

— पीट एल्विन

मुझे लगता है कि यह वास्तव में विशिष्ट बाएं / दाएं / शीर्ष / नीचे मार्जिन को संभाल नहीं करता है? और एक विशिष्ट टेबल-सेल के पास कोई रास्ता नहीं है जो बाकी हिस्सों से अलग है?

— नाथन

@ नथन paddingको किसी भी चयनकर्ता के लिए सेट किया जा सकता है (जैसे वर्ग या आईडी), हमेशा की तरह। यदि आप marginकोशिकाओं के बीच का मतलब रखते हैं, तो इसे ऊर्ध्वाधर और क्षैतिज अक्षों के लिए दो मान सेट करके अलग-अलग सेट किया जा सकता है border-spacing, लेकिन यह पूरी तालिका पर लागू होगा और व्यक्तिगत कोशिकाओं पर नहीं।

— बोआज

Answer 2

मार्जिन सेट करने के लिए आप आंतरिक divs का उपयोग कर सकते हैं।

<div style="display: table-cell;">
   <div style="margin:5px;background-color: red;">1</div>
</div>
<div style="display: table-cell; ">
  <div style="margin:5px;background-color: green;">1</div>
</div>

जेएस फिडल

Comments

यह एक अच्छा विचार है यदि आप कोशिकाओं के बीच मार्जिन चाहते हैं, लेकिन उनमें से बाएं या दाएं नहीं। तब आपका CSS कुछ ऐसा हो सकता है .inner-div { margin-right: 5px; } .outer-cell:last-child .inner-div { margin-right: 0; }। लेकिन यह भी ध्यान दें: इस उदाहरण की लाल और हरी पृष्ठभूमि आवश्यक रूप से ऊंचाई में मेल नहीं खाएगी क्योंकि वे कोशिकाओं पर नहीं हैं।

— हेनरिक एन

Answer 3

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

div {
  display: table-cell;
  border: 5px solid transparent;
}

नोट: आप यहाँ प्रतिशत का उपयोग नहीं कर सकते ... :(

Answer 4

यदि आप इस तरह से एक दूसरे के बगल में div है

<div id="1" style="float:left; margin-right:5px">

</div>
<div id="2" style="float:left">

</div>

यह काम करना चाहिए!

Comments

ठीक है, लेकिन क्या होगा यदि वह बराबर में दो div चाहते हैं? फ्लोट ऐसा नहीं कर सकते।

— हिरोशिमा

और यही कारण है कि जेएस कमाल है :)

— क्रिस हैप्पी

@ChrisHappy सीएसएस समाधान होने पर कभी भी जावास्क्रिप्ट का उपयोग न करें। आपका कोड बस भारी हो जाता है।

— ssc-hrep3

@ ssc-hrep3 जवाबदारी मांगने पर, भारी सीएसएस समाधान अब पर्याप्त नहीं ...

— क्रिस हैप्पी

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

— ssc-hrep3