क्या x पिक्सल की मात्रा के बाद सीमा-तल शुरू करना संभव है?

Question

अगर वहाँ इस तरह के एक विकल्प था यह शांत होगा, और मैं एक और div साथ border-bottom ओवरलैप होगा ..

Answer 1

संपादित: वहाँ तत्व का पाठ सामग्री के संदर्भ में अगर थोड़ा और मैं इन दिनों कर चाहते हैं क्या box-shadow और background-clip का उपयोग करें। अन्यथा, मेरे मूल उत्तर में अंतिम समाधान देखें।

div { 
 
    border-bottom: solid .75em transparent; 
 
    margin: 7em auto 1em; 
 
    width: 10em; height: 5em; 
 
    box-shadow: 0 1px 0 -1px black; 
 
    background: dimgrey padding-box; 
 
}

<div></div>

के ऊपर काटना करते हैं।

सबसे पहले, border-bottom: solid .75em transparent।

border-bottom क्षेत्र अंतर क्षेत्र होने जा रहा है। यही कारण है कि हम इसे पारदर्शी बनाते हैं। इस सीमा की चौड़ाई बदलने से अंतराल की चौड़ाई बदल जाती है।

margin, width और height नियम - यहां कुछ भी अजीब नहीं है, केवल तत्व को स्थितिबद्ध और आकार दे रहा है।

तब हमारे पास यह बिट है: box-shadow: 0 1px 0 -1px black।

यह box-shadow कोई धुंध के साथ नीचे सीमा बनाता है। y ऑफ़सेट (दूसरा मान) 1px "सीमा" बनाता है। इस y ऑफसेट को बढ़ाने से हमारी "सीमा" की चौड़ाई बढ़ जाती है। यह black सीमा है, लेकिन हम इसे किसी और चीज़ में बदल सकते हैं।

हम भी नहीं चाहते कि हमारे बॉक्स-छाया पक्षों पर दिखें, इसलिए हम इसे -1px फैलाते हैं।

अंत में, हमने हमारे तत्व पर background सेट किया है। यह dimgrey एक है, लेकिन यह कुछ और हो सकता है (एक ढाल, एक तस्वीर, जो भी हो)। डिफ़ॉल्ट पृष्ठभूमि के साथ सीमा के नीचे भी विस्तार होता है, लेकिन हम इसे नहीं चाहते हैं, इसलिए हम इसे padding-box के क्षेत्र तक सीमित कर देते हैं। मैंने यहां शॉर्टेंड का उपयोग किया है। लांगहैंड संपत्ति background-clip है और आप this article (अस्वीकरण: मैंने इसे लिखा है) में इस तरह के समान कार्यों और अन्य उदाहरणों के बारे में एक विस्तृत स्पष्टीकरण प्राप्त कर सकते हैं।

---

यहाँ मूल जवाब

आप एक छद्म तत्व इस्तेमाल कर सकते हैं है। तत्व के नीचे नीचे ऑफसेट, बिल्कुल 100% चौड़ाई, ऑफसेट।

demo

एचटीएमएल:

<div></div> 

सीएसएस:

div { 
    position: relative; 
    margin: 7em auto 1em; 
    width: 10em; height: 5em; 
    background: dimgrey; 
} 
div:after { 
    position: absolute; 
    bottom: -.8em; 
    width: 100%; 
    border-bottom: solid 1px; 
    content: ''; 
} 

---

या आप background-clip: content-box इस्तेमाल कर सकते हैं और आप एक छद्म का उपयोग करने की जरूरत नहीं होगी हाथी जाहिर। लेकिन फिर आपका पाठ पृष्ठभूमि के किनारों तक टिकेगा (जब तक कि यह एक छोटा टेक्स्ट और केंद्रित न हो)।

demo

प्रासंगिक सीएसएस:

div { 
    margin: 7em auto 1em; 
    padding: 0 0 .8em; 
    border-bottom: solid 1px; 
    width: 10em; height: 5em; 
    background: dimgrey content-box; 
} 

Answer 2

आप गद्दी उपयोग कर सकते हैं।

padding: 10px; // push 10px the content 
border: 1px solid #fff; 

Answer 3

मार्जिन और गद्दी एक छवि या एक वस्तु के चारों ओर सफेद स्थान है।

जैसा कि आप छवि में देख सकते हैं, पैडिंग सामग्री और सीमा के बीच की जगह है जिसे आप परिभाषित करते हैं, इसके बजाय मार्जिन सीमा के बाहर की जगह है, सीमा के बीच और इस ऑब्जेक्ट के बगल में अन्य तत्वों के बीच है।

एचटीएमएल:

<div id="box"></div> 

सीएसएस:

#box{ 
    background: url(image.jpg) no-repeat; 
    height: 100px; 
    width: 100px; 
    border-bottom: 1px solid #333; 
    padding-bottom: 10px; 
} 

यहाँ आप एक सरल उदाहरण मिल सकते हैं: http://jsfiddle.net/k7QcN/

तो आपके मामले में आप कुछ इस तरह कर सकते हैं