div सीमा पर पैडिंग

Question

मैं एक सीएसएस सीमा पर पैडिंग रखना चाहता हूं। इसे किनारे से दूर एक div के अंदर खींचें। क्या यह सीएसएस का उपयोग कर संभव है (सीएसएस 3 ठीक है, वेबकिट)।

यहां डिज़ाइन है।

मैं एक div के अंदर एक div रखकर ऐसा किया, तो आंतरिक div करने के लिए एक सीमा दे। मैं मार्कअप को यथार्थ के रूप में पतला बनाना चाहता हूं इसलिए यदि मैं सकारात्मक हो तो केवल एक div का उपयोग करना चाहता हूं।

धन्यवाद।

Answer 1

आप सीएसएस रूपरेखा संपत्ति के साथ ऐसा करने में सक्षम होना चाहिए:

<style> 
.outer { 
     outline: 2px solid #CCC; 
     border: 1px solid #999; 
     background-color: #999; 
     } 
</style> 

<div class="outer"> 
example 
</div> 

Answer 2

नहीं, यह संभव नहीं है। पैडिंग, मार्जिन और सीमा तत्वों के सभी हिस्सों हैं, आप एक सीमा पैडिंग या सीमा को मार्जिन नहीं दे सकते हैं।

हो सकता है कि यदि आप जो कुछ करने का प्रयास कर रहे हैं उसका एक उदाहरण पोस्ट करते हैं तो हम वैकल्पिक समाधान के साथ आ सकते हैं?

-update- अपना उदाहरण देखकर मुझे डर है कि यह अभी भी संभव नहीं है, कम से कम सिर्फ एक div के साथ नहीं। मैं divitis के प्रशंसक नहीं हूँ, लेकिन अतिरिक्त div शायद इस मामले में सबसे अच्छा विकल्प है।

Answer 3

सीमा के चारों ओर पैडिंग (जो इसे किनारे से अलग करेगा) को 'मार्जिन' कहा जाता है: अधिक जानकारी के लिए, Box model देखें।

Answer 4

दुर्भाग्य से, एक और div जोड़ने के बिना, मुझे नहीं लगता कि आप इसे केवल सीएसएस के साथ कर सकते हैं।

आपके डिजाइन को जितना अधिक जटिल हो जाता है, उतना अधिक आपको अतिरिक्त HTML टैग की आवश्यकता होगी।

आपका अन्य (भी महान नहीं) विकल्प एक छवि पृष्ठभूमि है, या यदि यह किसी भी तरह से आपको बेहतर महसूस करता है, तो आप JQuery के साथ तत्व क्लाइंट पक्ष जोड़ सकते हैं, जिससे आपकी सर्वर साइड फाइलों की "शुद्धता" को बनाए रखा जा सके।

शुभकामनाएं।

Answer 5

आप अपनी इच्छित सीमाओं के साथ आंतरिक div बनाकर और एक डिस्प्ले के साथ बाहरी div बनाकर ऐसा कर सकते हैं: तालिका। कुछ इस तरह:

<style> 
    .outer { 
     background: #ccc; 
     display: table; 
     width: 400px; 
    } 

    .inner { 
     border: 2px dashed #999; 
     height: 50px; 
     margin: 5px; 
    } 

</style> 

<div class="outer"> 

<div class="inner"> 
</div> 

</div> 

Answer 6

सीमाओं के बजाय

, आप रूपरेखा संपत्ति का उपयोग कर सकते हैं:

div{ 
height:300px; 
width:500px; 
background-color:lightblue; 
outline:dashed; 
outline-offset:-10px;  
} 

http://jsfiddle.net/H7KdA/