सीमा और सामग्री के बीच अंतरिक्ष?/सामग्री से सीमा दूरी?

Question

क्या सीमा और इसकी सामग्री के बीच की दूरी को बढ़ाना संभव है? यदि यह संभव है, बस इसे यहाँ पर कार्य करें: JSFiddle

क्या मैं से पिक्सल के एक जोड़े दूर कर सामग्री के आसपास एक चमक रहा है (0px/0px दूरी के साथ एक छाया का प्रयोग करके) और फिर एक सीमा डाल पर योजना चमक।

नोट: 3

Answer 1

पैडिंग जोड़ें। तत्व को पैडिंग करने से इसकी सामग्री और इसकी सीमा के बीच की जगह बढ़ जाएगी। हालांकि, ध्यान दें कि एक बॉक्स-छाया सीमा से सामग्री शुरू नहीं करेगा, जिसका अर्थ है कि आप छाया और बॉक्स के बीच स्थान नहीं डाल सकते हैं। वैकल्पिक रूप से आप इसका उपयोग कर सकते हैं: पहले या: तत्व पर छद्म चयनकर्ताओं के बाद, जो आप छाया डालते हैं, उस पर थोड़ा बड़ा बॉक्स बनाने के लिए: http://jsbin.com/aqemew/edit#source

Answer 2

बस इसे चारों ओर एक और div लपेट, जो बॉर्डर तथा पैडिंग है: मैं एक इनसेट छाया और एक सीमा के बजाय, यह बेहतर है, लेकिन धन्यवाद जवाब के लिए क्या करने के लिए फैसला किया है तुम्हें चाहिए।

Answer 3

आप आमतौर पर सीमा और सामग्री के बीच दूरी जोड़ने के लिए पैडिंग का उपयोग करते हैं। However, पैडिंग पर पृष्ठभूमि फैलती है।

आप अभी भी nested element के साथ ऐसा कर सकते हैं।

एचटीएमएल:

<div id="outter"> 
    <div id="inner"> 
     test 
    </div> 
</div> 

outter div:

border-style: ridge; 
border-color: #567498; 
border-spacing:10px; 
min-width: 100px; 
min-height: 100px; 
float:left; 

भीतरी div:

width: 100px; 
min-height: 100px; 
margin: 10px; 
background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0, rgb(39,54,73)), 
    color-stop(1, rgb(30,42,54)) 
); 
background-image: -moz-linear-gradient(
    center bottom, 
    rgb(39,54,73) 0%, 
    rgb(30,42,54) 100% 
     );} 

Answer 4

आप एक <hr> जोड़ते और उसे स्टाइल की कोशिश कर सकते। यह एक न्यूनतम मार्कअप परिवर्तन है लेकिन कम सीएसएस की आवश्यकता है ताकि यह चाल चल सके।

बेला:

http://jsfiddle.net/BhxsZ/

Answer 5

इसकी संभव छद्म का उपयोग कर तत्व (के बाद)।
मैंने मूल कोड में

position:relative

और कुछ मार्जिन में जोड़ा है।
यहाँ संशोधित JSFiddle है: http://jsfiddle.net/r4UAp/86/

#content{ 
    width: 100px; 
    min-height: 100px; 
    margin: 20px auto; 
    border-style: ridge; 
    border-color: #567498; 
    border-spacing:10px; 
    position:relative; 
    background:#000; 
} 
#content:after { 
    content: ''; 
    position: absolute; 
    top: -15px; 
    left: -15px; 
    right: -15px; 
    bottom: -15px; 
    border: red 2px solid; 
}