तत्वों के बीच मार्जिन वाले तत्वों का कंटेनर बनाएं लेकिन कंटेनर नहीं?

Question

• कंटेनर #666 में margin: 20px; overflow: hidden; है।
• नोड #333margin: 20px 0 0 20px; float: left; है।

उदाहरण के लिए, http://jsbin.com/owejal/3/edit या चित्र:

हालांकि, इच्छित परिणाम है:

• 20px मार्जिन के साथ कंटेनर, के बीच 20px मार्जिन के साथ
• बच्चों, लेकिन कंटेनर के साथ नहीं।

यह नकारात्मक गद्दी का प्रयोग कर प्राप्त किया जा सकता है (अर्थात, अगर कंटेनर padding: -20px 0 0 -20px था), हालांकि इस तरह के बात मौजूद नहीं है।

वांछित परिणाम अतिरिक्त तत्व (http://jsbin.com/owejal/4/) का उपयोग करके हासिल किया जा सकता है, हालांकि मैं सीखने के लिए उत्सुक हूं कि सीएसएस केवल समाधान है या नहीं।

Answer 1

निम्नलिखित सीएसएस आप इच्छित परिणाम प्राप्त है, वास्तव में आप अभी भी 2 सीमाएं हैं होगा:

1. आप शरीर की पृष्ठभूमि बदलते हैं तो आप
2. .foo तत्व के लिए सीमा रंग अद्यतन करने की आवश्यकता आंतरिक नोड्स में अभी भी सही मार्जिन है, यह वांछित परिणाम स्क्रीन शॉट भी है (समूह में 5 नोड्स हो सकते हैं, लेकिन इस समाधान में केवल 4 होगा)।

.group { 
    overflow: hidden; 
    margin: 20px; /* margin is required */ 
    background: #666; 
} 
.node { 
    width: 100px; 
    height: 100px; 
    float: left; 
    background: #333; 
    margin: 0px 20px 20px 0px; 
} 
.foo { 
    height: 20px; 
    background: #00f; 
    margin: 20px; 
} 
.group + .foo { 
    height: 20px; 
    background: #00f; 
    margin: 20px; 
    position: relative; 
    top:-40px; 
    border-top: 20px solid #fff; 
} 

तुम अब भी समाधान here

Answer 2

पा सकते हैं जब से तुम आवश्यकता के रूप में resizability का उल्लेख नहीं था, तो आप कर सकते थे यहाँ की तरह एक n वें बच्चे को घोषणा सरल उपयोग:

http://jsbin.com/owejal/51/

हालांकि, यह समाधान पैरेंट कंटेनर की निश्चित चौड़ाई के लिए अनुकूलित किया गया है, इसलिए हमेशा 4 तत्व होना चाहिए उदाहरण के लिए एक पंक्ति में है। फिर भी, केवल इसके सीएसएस।

Answer 3

बदलें करने के लिए नोड के मार्जिन:

.node { margin: 0 20px 20px 0; } 

देखें http://jsbin.com/owejal/52/edit। ध्यान दें कि यह आपको अभी भी नीचे अतिरिक्त पैडिंग देगा, लेकिन यह एक आम मुद्दा है जिसे आसानी से हल नहीं किया जा सकता है। इसे हल करने के विभिन्न तरीकों के लिए http://css-tricks.com/spacing-the-bottom-of-modules/ देखें (हालांकि यदि आपने प्रस्तुत किया है, तो इनमें से कोई भी समाधान काम नहीं करता है)।

Answer 4

यह थोड़ा हैकी है, लेकिन कुछ रणनीतिक रूप से रखे छद्म तत्वों के साथ शीर्ष और बाएं मार्जिन क्षेत्रों को छिपाने के बारे में कैसे? http://jsfiddle.net/SUJtd/

.foo {height:20px; background:#00f; margin:20px 20px 0;} 

.group {overflow:hidden; margin:0 20px 20px 0; background:#666; position:relative;} 
.group:before{content:""; position:absolute; top:0; left:0; right:0; height:20px; background:#fff;} 
.group:after{content:""; position:absolute; top:0; bottom:0; left:0; width:20px; background:#fff;} 

.node {width:100px; height:100px; float:left; background:#333; margin:20px 0 0 20px;} 

Answer 5

आप केवल तत्वों के बीच अंतर के बारे में परवाह है, तो आप छद्म तत्व को निरस्त कर सकते हैं। यह केवल पृष्ठभूमि के लिए है।

http://codepen.io/cimmanon/pen/mucDv

<div class="foo"></div> 
<div class="group"> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
</div> 
<div class="foo"></div> 

सीएसएस:

.group { 
    overflow: hidden; 
    margin: -10px 0 -10px 10px; 
    padding-right: 10px; 
    position: relative; 
} 

.group:before { 
    display: block; 
    content: ''; 
    position: absolute; 
    z-index: -1; 
    top: 10px; 
    right: 20px; /* 20px instead of 10px due to padding */ 
    bottom: 10px; 
    left: 10px; 
    background: #666; 
} 

.node { 
    width: 100px; 
    height: 100px; 
    float: left; 
    background: #333; 
    margin: 10px; 
} 

.foo { 
    height: 20px; 
    background: #00f; 
    margin: 20px; 
} 

Answer 6

कोई अतिरिक्त HTML टैग - लेकिन एक वर्ग परिवर्तन & कोई छद्म तत्वों

एक सरल चाल है जो शायद काम करना चाहिए आपके लिए: http://jsbin.com/owejal/65/edit

स्क्रीनशॉट:

नोड्स :) के सभी संभव संख्या के साथ कार्य करेगा

<div class="foo"></div> 
    <div class="group"> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    <div class="node"></div> 
    </div> 
    <div class="foo2"></div> 

सीएसएस:

.group { overflow: hidden; margin: 20px; margin-bottom:0px; /* margin is required */ background: #666; } 
.node { width: 100px; height: 100px; float: left; background: #333; margin: 0px 20px 20px 0px; /* there must 20px gap between every node, but not the container */ } 
.foo { height: 20px; background: #00f; margin: 20px;} 
.foo2{ 
    height:20px; 
    background:#00f; 
    border-top:20px solid white; 
    margin:20px; 
    margin-top:-20px; 
}